JS实现div的拖拉拽

原生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  的对于单独元素和多个元素的拖拽事件
上一篇:Appium-Touch Actions(触屏动作)


下一篇:动态规划——马儿跳