js拖拽效果的原理及实现

       实现多个元素拖拽原理：首先是要点击元素，在进行拖拽，点击是用鼠标，所以是鼠标事件；点击分为按下（mousedown）和松开（mouseup）两个部分，拖拽还要加个移动（mousemove）事件。所以拖拽就是先鼠标按下元素，再进行移动，最后松开，这就实现了元素的拖拽。

 

下面是实现拖拽的代码：

首先在body中定义几个div元素

<style>
div{
width:50px;
height:50px;
position:absolute;
}
</style>

 

然后在head中设置style设置div的css代码

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

再在body里设置js代码

<script>
var divs=document.querySelectorAll("div"); //获取所有的div标签赋给divs，divs就是类数组列表
for(var i=0;i<divs.length;i++){         //遍历类数组列表中所有元素
divs[i].addEventListener("mousedown",mouseHandler);  //  每个divs中的元素都设置按下元素事件,触发函数mouseHandler
}
function mouseHandler(){    // 设置函数mouseHandler
if(e.type==="mousedown"){   //如果事件的类型是mousedown时，就是按下时，执行以下条件语句
e.preventDefault(); //取消默认事件
document.div=e.target;
document.offset={x:e.offsetX,y:e.offsetY} //  设置document.offset对象里的属性是x，y，属性值是鼠标相对元素左上角的位置
document.addEventListener("mousemove",mouseHandler)；//设置移动事件触发mouseHandler函数
document.addEventListener("mouseup",mouseHandler)；//设置松开事件，触发mouseHandler函数
  }else if(e.type==="mousemove"){ //如果事件类型是移动事件时，执行以下条件语句
document.div.style.left=e.clientX-document.offset.x+"px";  //把点击的元素位置相对可视窗口左边位置减去相对元素左边的位置的值赋给点击元素的css代码中的left
document.div.style.top=e.clientY-document.offset.y+"px"; //把点击的元素位置相对可视窗口左上边位置减去相对元素左上边的位置的值赋给点击元素的css代码中的top
}else if(e.type==="mouseup"){
document.removeEventListener("mousemove",mouseHandler)；//删除移动事件
document.removeEventListener("mouseup",mouseHandler)；//删除松开事件
}
}




</script>