利用JS实现元素拖拽怎样做，步骤是什么

来源：恒创科技编辑：恒创科技编辑部

2024-01-27 11:27:59

这篇文章主要讲解了“利用JS实现元素拖拽怎样做，步骤是什么”，文中的讲解内容简单、清晰、详细，对大家学习或是工作可能会有一定的帮助，希望大家阅读完这篇文章能有所收获。下面就请大家跟着小编的思路一起来学习一下吧。

元素拖拽分成3个步骤：按下鼠标，移动鼠标，松开鼠标。

拖拽原理：按下拖拽元素后开始监听文档中鼠标移动事件，然后再监听鼠标松开事件；鼠标移动时，元素div要随着鼠标一起移动，需要计算元素div位移的距离（移动的距离=鼠标离可视窗口的位置 �C 鼠标在div中相对于左上角的位置）。然后松开鼠标时，删除移动事件和松开事件，元素完成拖拽。

一开始先监听鼠标按下事件mousedown，事件触发执行mouseHandler函数；

div.addEventListener("mousedown",mouseHandler);

进入mouseHandler函数后，进行if else if 的判断，如果是按下事件，就监听鼠标移动和松开事件，这里要用document文档来作为监听对象，如果使用元素div监听时，如果鼠标在移动过程超出了div元素，就无法拖拽元素；

进入移动事件，就把鼠标移动的距离（鼠标离可视窗口的位置 �C 鼠标在div中相对于左上角的位置）赋值给元素的left和top，元素就可以随着鼠标移动；

最后进入松开鼠标事件，删除了移动和送开鼠标事件，元素就会停在鼠标松开的位置

关键：元素显示位置=鼠标离可视窗口的位置 �C 鼠标相对于在div元素左上角的位置

js代码带注释

var div=document.querySelector("div");
    var offsetX,offsetY;　　//定义全局变量用于接收鼠标坐标的变量
    div.addEventListener("mousedown",mouseHandler);
    function mouseHandler(e){  //事件的执行函数自带参数e
      if(e.type==="mousedown"){  //e.type是执行事件的类型
        offsetX=e.offsetX;    
        offsetY=e.offsetY;   
        document.addEventListener("mousemove",mouseHandler) 
        document.addEventListener("mouseup",mouseHandler)  //如果有鼠标移动或松开事件的发生再次执行mouseHandler函数
      }else if(e.type==="mousemove"){      
        div.style.left=e.clientX-offsetX+"px"; //鼠标相对当前可视窗口的坐标 - 相对元素左上角的坐标 
        div.style.top=e.clientY-offsetY+"px";
        
      }else if(e.type==="mouseup"){  
        document.removeEventListener("mousemove",mouseHandler);
        document.removeEventListener("mouseup",mouseHandler);  //删除鼠标移动和鼠标松开事件
      }
    }

效果如图：

注意：div元素要设置定位才可以进行移动。

关于“利用JS实现元素拖拽怎样做，步骤是什么”的内容今天就到这，感谢各位的阅读，大家可以动手实际看看，对大家加深理解更有帮助哦。如果想了解更多相关内容的文章，关注我们，恒创科技小编每天都会为大家更新不同的知识。

本文地址：https://www.henghost.com/jishu/19639/