实现web页面元素的拖拽和缩放
作者：互联网
通过js监听鼠标事件，实现web页面元素的拖拽和缩放，完整代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
#box {
width: 100%;
height: calc(100vh);
position: relative;
background: #009688;
}
#drag {
width: 200px;
height: 200px;
position: relative;
background: #EB7350;
cursor: move;
}
</style>
</head>
<body>
<div id="box">
<div id="drag">
</div>
</div>
<!-- js实现代码 -->
<script>
window.onload = function () {
var box = document.getElementById("box");
var drag = document.getElementById("drag");
//鼠标事件
dragTool(drag);
scaleTool(drag, box);
//拖拽方法
function dragTool(node) {
node.onmousedown = function (ev) {
//浏览器兼容
var e = ev || window.event;
//鼠标相对元素距离
var offsetX = ev.offsetX;
var offsetY = ev.offsetY;
document.onmousemove = function (ev) {
//浏览器兼容
var e = ev || window.event;
//定义currentLeft
var currentLeft = e.clientX - offsetX;
//定义currentTop
var currentTop = e.clientY - offsetY;
//限制左边界
if (currentLeft <= 0) {
currentLeft = 0;
}
//限制右边界
var windowWidth = document.documentElement.clientWidth || document.body.clientWidth
if (currentLeft >= windowWidth - node.offsetWidth) {
currentLeft = windowWidth - node.offsetWidth
}
//限制上边界
if (currentTop <= 0) {
currentTop = 0;
}
//限制下边界
var windowHeight = document.documentElement.clientHeight || document.body.clientHeight
if (currentTop >= windowHeight - node.offsetHeight) {
currentTop = windowHeight - node.offsetHeight
}
//被拖拽元素的left top 值
node.style.left = currentLeft + "px";
node.style.top = currentTop + "px";
}
}
document.onmouseup = function () {
document.onmousemove = null;
}
}
//缩放方法
function scaleTool(drag, box) {
//判断鼠标滚轮滚动方向
if (drag.addEventListener) {
drag.addEventListener('DOMMouseScroll', wheel, false);
}
drag.onmousewheel = wheel;
//统一处理滚轮滚动事件
function wheel(event) {
var delta = 0;
if (!event) event = window.event;
if (event.wheelDelta) {
delta = event.wheelDelta / 120;
if (window.opera) delta = -delta;
} else if (event.detail) {
delta = -event.detail / 3;
}
if (delta)
handle(delta);
}
//上下滚动时的具体处理函数
function handle(delta) {
//获取当前值
var w = drag.offsetWidth;
var h = drag.offsetHeight;
var top = drag.offsetTop;
var left = drag.offsetLeft;
var right = box.offsetWidth - (left + w);
var bottom = box.offsetHeight - (top + h)
var step = 0.1;
if (delta < 0) { //向下滚动
//设置最小值
var currentw = Math.max(100, w - w * step);
var currenth = Math.max(100, h - h * step);
if (currentw !== 100 || currenth !== 100) {
//设置最大值，不大于外部元素
currentw = currentw >= box.offsetWidth ? box.offsetWidth : currentw;
currenth = currenth >= box.offsetHeight ? box.offsetHeight : currenth;
//设置不超出元素范围
var currenttop = (top + (h * step / 2)) < 0 ? 0 : (top + (h * step / 2));
var currentleft = (left + (w * step / 2)) < 0 ? 0 : (left + (w * step / 2));
var currentright = (right + (w * step / 2)) < 0 ? 0 : (right + (w * step / 2));
var currentbottom = (bottom + (h * step / 2)) < 0 ? 0 : (bottom + (h * step / 2));
drag.style.width = currentw + "px";
drag.style.height = currenth + "px";
drag.style.top = currenttop + "px";
drag.style.left = currentleft + "px";
drag.style.right = currentright + "px";
drag.style.bottom = currentbottom + "px";
}
} else { //向上滚动
//设置最小值
var currentw = Math.max(100, w + w * step);
var currenth = Math.max(100, h + h * step);
if (currentw !== 100 || currenth !== 100) {
//设置最大值，不大于/超出窗口
currentw = currentw >= box.offsetWidth ? box.offsetWidth : currentw;
currenth = currenth >= box.offsetHeight ? box.offsetHeight : currenth;
//设置不超出元素范围
var currenttop = (top - (h * step / 2)) < 0 ? 0 : (top - (h * step / 2));
var currentleft = (left - (w * step / 2)) < 0 ? 0 : (left - (w * step / 2));
var currentright = (right - (w * step / 2)) < 0 ? 0 : (right - (w * step / 2));
var currentbottom = (bottom - (h * step / 2)) < 0 ? 0 : (bottom - (h * step / 2));
drag.style.width = currentw + "px";
drag.style.height = currenth + "px";
drag.style.top = currenttop + "px";
drag.style.left = currentleft + "px";
drag.style.right = currentright + "px";
drag.style.bottom = currentbottom + "px";
}
}
}
}
}
</script>
</body>
</html>标签：box,web,style,缩放,px,step,drag,var,拖拽 来源： https://blog.csdn.net/weixin_55510188/article/details/120387815