标签：box web style 缩放 px step drag var 拖拽
通过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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。