标签：direction mouseDownX 拖拉 px style JS test div document
原生js实现元素的拖拽和拉伸，需要清楚一下几个要素：
|
网页可见区域宽： document.body.clientWidth 网页可见区域高： document.body.clientHeight 网页可见区域宽： document.body.offsetWidth (包括边线的宽) 网页可见区域高： document.body.offsetHeight (包括边线的高) 网页正文全文宽： document.body.scrollWidth 网页正文全文高： document.body.scrollHeight 网页被卷去的高： document.body.scrollTop 网页被卷去的左： document.body.scrollLeft
对应的dom元素的宽高有以下几个常用的： 元素的实际高度：document.getElementById("div").offsetHeight 元素的实际宽度：document.getElementById("div").offsetWidth 元素的实际距离左边界的距离：document.getElementById("div").offsetLeft 元素的实际距离上边界的距离：document.getElementById("div").offsetTop |
mousedown——onmousemove ——onmouseup 分别是鼠标点击目标事件、鼠标在页面移动事件、鼠标离开目标事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js实现拖拽和拉伸</title>
</head>
<body>
<div id="test" style="position:absolute;left:0;top:210PX;width:400px;height:400px; border:1px solid #adadad; box-shadow: #e9e9e9 0px 0px 10000px 100000px;"></div>
<div class="test" style="position:absolute;left:0px;top:0px;width:200px;height:200px; border:1px solid #adadad;"></div>
<div class="test" style="position:absolute;left:210px;top:0px;width:200px;height:200px; border:1px solid #adadad;"></div>
<div class="test" style="position:absolute;left:420px;top:0px;width:200px;height:200px; border:1px solid #adadad;"></div>
<script>
let arr=document.getElementsByClassName('test')
for(var i=0;i<arr.length;i++){
let test=arr[i]
test.addEventListener('mousedown',e=>{
var mouseDownX = e.clientX;
var mouseDownY = e.clientY;
var clickBoxLeft = test.offsetLeft;
var clickBoxTop = test.offsetTop;
var clickBoxWeight = test.offsetWidth;
var clickBoxHeight = test.offsetHeight;
var direction = 0;
if (mouseDownX < clickBoxLeft + 30) {
direction = 'left';
} else if (mouseDownX > clickBoxLeft + clickBoxWeight - 30) {
direction = 'right';
}
if (mouseDownY < clickBoxTop + 30) {
direction = 'top';
} else if (direction < clickBoxTop + clickBoxHeight - 30) {
direction = 'bottom';
}
if ((clickBoxLeft + clickBoxWeight - 30) < mouseDownX && mouseDownX < (clickBoxLeft + clickBoxWeight) && (clickBoxTop + clickBoxHeight - 30) < mouseDownY && mouseDownY < (clickBoxTop + clickBoxHeight)) {
direction = 'rightBottomCorner';
} else if ((clickBoxLeft + 30) < mouseDownX && mouseDownX < (clickBoxLeft + clickBoxWeight - 30) && (clickBoxTop + 30) < mouseDownY && mouseDownY < (clickBoxTop + clickBoxHeight - 30)) { //如果是在中间位置，则实现拖动功能
direction = "drag";
}
document.onmousemove = function (e) {
var xx = e.clientX;
var yy = e.clientY;
if (direction === 'left') {
test.style.width = clickBoxWeight + mouseDownX - xx + 'px'
test.style.left = xx + 'px';
} else if (direction === 'right') {
test.style.width = clickBoxWeight + xx - mouseDownX + 'px'
}
if (direction === 'top') {
test.style.height = clickBoxHeight + mouseDownY - yy + 'px';
test.style.top = yy + 'px';
} else if (direction === 'bottom') {
test.style.height = clickBoxHeight + yy - mouseDownY + 'px';
}
if (direction === 'rightBottomCorner') {
test.style.width = clickBoxWeight + xx - mouseDownX + 'px'
test.style.left = clickBoxLeft + 'px';
test.style.height = clickBoxHeight + yy - mouseDownY + 'px';
test.style.top = clickBoxTop + 'px';
} else if (direction === "drag") {
test.style.left = xx - mouseDownX + clickBoxLeft + 'px';
test.style.top = yy - mouseDownY + clickBoxTop + 'px';
}
//return false; //这里为了避免抖动
};
document.onmouseup = function () {
document.onmousemove = null;
document.onmouseup = null;
};
if (e.preventDefault) {
e.preventDefault();
}
})
}
var clickBox = document.getElementById('test');
/**
*desc:当在当前元素上按下鼠标时，就触发拖动和拉伸操作
*/
clickBox.onmousedown =(e)=> {
console.log(clickBox)
var mouseDownX = e.clientX;
var mouseDownY = e.clientY;
var clickBoxLeft = clickBox.offsetLeft;
var clickBoxTop = clickBox.offsetTop;
var clickBoxWeight = clickBox.offsetWidth;
var clickBoxHeight = clickBox.offsetHeight;
var direction = 0;
if (mouseDownX < clickBoxLeft + 30) {
direction = 'left';
} else if (mouseDownX > clickBoxLeft + clickBoxWeight - 30) {
direction = 'right';
}
if (mouseDownY < clickBoxTop + 30) {
direction = 'top';
} else if (direction < clickBoxTop + clickBoxHeight - 30) {
direction = 'bottom';
}
if ((clickBoxLeft + clickBoxWeight - 30) < mouseDownX && mouseDownX < (clickBoxLeft + clickBoxWeight) && (clickBoxTop + clickBoxHeight - 30) < mouseDownY && mouseDownY < (clickBoxTop + clickBoxHeight)) {
direction = 'rightBottomCorner';
} else if ((clickBoxLeft + 30) < mouseDownX && mouseDownX < (clickBoxLeft + clickBoxWeight - 30) && (clickBoxTop + 30) < mouseDownY && mouseDownY < (clickBoxTop + clickBoxHeight - 30)) { //如果是在中间位置，则实现拖动功能
direction = "drag";
}
/**
*desc:当鼠标开始华东的时候，根据鼠标的移动方向去调整他的X，Y坐标和长宽
*/
document.onmousemove = function (e) {
e = e || event; //是要是使用原生js给我们提供的e回调参数，这存储了很多有用的信息
var xx = e.clientX;
var yy = e.clientY;
if (direction === 'left') {
clickBox.style.width = clickBoxWeight + mouseDownX - xx + 'px'
clickBox.style.left = xx + 'px';
} else if (direction === 'right') {
clickBox.style.width = clickBoxWeight + xx - mouseDownX + 'px'
}
if (direction === 'top') {
clickBox.style.height = clickBoxHeight + mouseDownY - yy + 'px';
clickBox.style.top = yy + 'px';
} else if (direction === 'bottom') {
clickBox.style.height = clickBoxHeight + yy - mouseDownY + 'px';
}
if (direction === 'rightBottomCorner') {
clickBox.style.width = clickBoxWeight + xx - mouseDownX + 'px'
clickBox.style.left = clickBoxLeft + 'px';
clickBox.style.height = clickBoxHeight + yy - mouseDownY + 'px';
clickBox.style.top = clickBoxTop + 'px';
} else if (direction === "drag") {
clickBox.style.left = xx - mouseDownX + clickBoxLeft + 'px';
clickBox.style.top = yy - mouseDownY + clickBoxTop + 'px';
}
//return false; //这里为了避免抖动
};
document.onmouseup = function () {
document.onmousemove = null;
document.onmouseup = null;
};
if (e.preventDefault) {
e.preventDefault();
}
};
// /**
// *desc:在拉伸的过程中，实现居中状态长存,有时间将其做成一个插件公布出来，供大家使用
// */
</script>
</body>
</html>
以上是参考https://blog.csdn.net/m0_37631322/article/details/89973554 的对于单独元素和多个元素的拖拽事件
标签：direction,mouseDownX,拖拉,px,style,JS,test,div,document 来源： https://www.cnblogs.com/zhanlizhen/p/14950244.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。