| 拖拽功能主要是用在让用户做一些自定义的动作，比如拖动排序，弹出框拖动移动等等 拖拽的流程动作1、鼠标按下 会触发onmousedown事件 2、鼠标移动 会触发onmousemove事件 3、鼠标松开 会触发onmouseup事件 拖拽原理1.鼠标按下+鼠标移动 = 拖拽-------事件 onmousedown + onmousemove 2.鼠标松开 = 无拖拽--------停止拖拽 onmouseup 3.鼠标偏移 = 拖拽距离 当点击dom的时候，记录当前鼠标的坐标值，也就是x、y值，以及被拖拽的dom的top、left值，而且还要在鼠标按下的回调函数里添加鼠标移动的事件： document.addEventListener(“mousemove”, moving, false) 和添加鼠标抬起的事件 document.addEventListener(“mouseup”,function() {document.removeEventListener(“mousemove”, moving, false);}, false);这个抬起的事件是为了解除鼠标移动的监听，因为只有在鼠标按下才可以拖拽，抬起就停止不会移动了。 当鼠标按下鼠标移动的时候，记录移动中的x、y值，那么这个被拖拽的dom的top和left值就是：
top=鼠标按下时记录的dom的top值+（移动中的y值 - 鼠标按下时的y值）
left=鼠标按下时记录的dom的left值+（移动中的x值 - 鼠标按下时的x值）; //极简单版 var div=document.querySelector("div"); // 按下时开始监听在文档中鼠标移动的事件 // 开始监听鼠标松开键的事件 // 只有按下时才准备拖拽 div.onmousedown=function(e1){ // 当鼠标在文档移动时，不能再div上移动，因为鼠标可能离开div，造成无法拖拽 div.onmousemove=function(e){ // 当鼠标移动时，将当前鼠标相对视口的坐标赋值给元素的left和top // 因为我们需要在按下的位置拖拽，因此我们还需要获取按下键鼠标相对div的左上角位置 // 使用当前鼠标位置减去这个相对元素的左上角位置，保证鼠标所按位置拖拽 div.style.left=e.clientX-e1.offsetX+"px"; div.style.top=e.clientY-e1.offsetY+"px"; } // 当释放鼠标键时，删除鼠标移动事件和删除鼠标释放事件 div.onmouseup=function(){ document.onmousemove=null; document.onmouseup=null; } }//简单版 var div=document.querySelector("div"); var offsetX,offsetY; div.addEventListener("mousedown",mouseDownHandler); function mouseDownHandler(e){ offsetX=e.offsetX offsetY=e.offsetY document.addEventListener("mousemove",mousemoveHandler) document.addEventListener("mouseup",mouseupHandler) } function mousemoveHandler(e){ div.style.left=e.clientX-offsetX+"px" div.style.top=e.clientY-offsetY+"px" } function mouseupHandler(e){ document.removeEventListener("mousemove",mousemoveHandler) document.removeEventListener("mouseup",mouseupHandler) }// 简单升级版 var div=document.querySelector("div"); var offsetX,offsetY; div.addEventListener("mousedown",mouseHandler); function mouseHandler(e){ if(e.type==="mousedown"){ offsetX=e.offsetX; offsetY=e.offsetY; document.addEventListener("mousemove",mouseHandler) document.addEventListener("mouseup",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) }}注 a、被拖拽的元素的样式要设置成绝对或相对位置才有效果。
b、拖拽加到document，不然内容会脱离
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持51zixue.net。
下载地址:
vue项目实现文件下载进度条功能
详细聊聊Vue的混入和继承 |
