js拖拽效果的原理及实现
Posted shenyunfeng123
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js拖拽效果的原理及实现相关的知识，希望对你有一定的参考价值。
js中元素的拖拽效果需要用到的主要的知识点为：事件侦听和鼠标事件。
即被拖拽的元素添加事件侦听，侦听的事件主要为mousedown，mousemove和mouseup，一些情况下还需要用到mouseleave。
本篇所针对的原理是存在多个相同元素情况下的拖拽。下面结合案例进行分析。
1.首先在body中创建7个div元素，并设置css样式。
<style> div{ width:50px; height: 50px; background-color: red; position: absolute;//7个div宽高50px，背景色为红色，重叠在页面左上角 } </style> <body> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> </body>
2.针对每一个div，它都需要有一个侦听事件，才能实现每个div都有拖拽效果。因此，在script中，给每个div元素都添加一个侦听事件。
var divs=document.querySelectorAll("div");//获取div元素的伪数组集合 for(var i=0;i<divs.length;i++){//利用for循环，给每个div添加一个鼠标按下的事件，来触发函数mouseHandler divs[i].addEventListener("mousedown",mouseHandler); }
3.接下来就是函数mouseHandler的主体部分了，这部分可以用if，else if进行判断，也可以用switch来做选择判断，根据个人喜好来编写，这里我用的是if，else if来写。
function mouseHandler(e){ if(e.type==="mousedown"){//通过判断事件的类型来执行对应的条件语句 e.preventDefault(); document.div=e.target;//这里将e.target赋给document.div,相当于设了一个局部变量，在触发mousemove事件后， //再次进入函数时，保证触发事件的div就是我们要改变位置的那个div document.offset={x:e.offsetX,y:e.offsetY};//这里也是将鼠标相对拖拽的那个div元素 //左上角的位置，设置成一个对象进行保存其实相当于如下两条 //document.offsetx=e.offsetX;将e.offsetX赋值给自定义变量document.offsetx //document.offsety=e.offsetY; document.addEventListener("mousemove",mouseHandler)；//在鼠标点击后，如果发生鼠标移动事件， //则再次进入该函数进行执行鼠标移动的执行语句 document.addEventListener("mouseup",mouseHandler)；//在鼠标点击后，如果发生鼠标释放事件，则再次进入该函数进行执行， //则再次进入该函数进行执行鼠标释放的执行语句 }else if(e.type==="mousemove"){ //判断触发的事件类型是mousemove之后执行 document.div.style.left=e.clientX-document.offset.x+"px";//这里的document.div和document.offset.x都 //是之前定义好的变量，用e.clientX-document.offset.x是因为元素的position位置是相对元素的左上顶点的位置的， //因此鼠标所在的位置值不能直接赋给它。 document.div.style.top=e.clientY-document.offset.y+"px"; }else if(e.type==="mouseup"){ //如果鼠标释放，则执行移除事件侦听 document.removeEventListener("mousemove",mouseHandler)； document.removeEventListener("mouseup",mouseHandler)； } }
以上是关于js拖拽效果的原理及实现的主要内容，如果未能解决你的问题，请参考以下文章