JS實現div的拖拉拽
阿新 • • 發佈:2021-06-29
原生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;"></
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 的對於單獨元素和多個元素的拖拽事件