js拖拽效果的原理及实现
用到三个事件：mosedown(鼠标放下)，mosemove（鼠标拖拽）以及moseup（鼠标放开）。
例：
第一种写法：
<div style="width: 50px; height: 50px;background-color: red;position: absolute;"></div>
<script>
var div=document.querySelector("div");
// 按下时开始监听在文档中鼠标移动的事件
// 开始监听鼠标松开键的事件
// 只有按下时才准备拖拽
div.onmousedown=function(e1){
// 当鼠标在文档移动时，不能再div上移动，因为鼠标可能离开div，造成无法拖拽
document.onmousemove=function(e){
// 当鼠标移动时，将当前鼠标相对视口的坐标赋值给元素的left和top
// 因为我们需要在按下的位置拖拽，因此我们还需要获取按下键鼠标相对div的左上角位置
// 使用当前鼠标位置减去这个相对元素的左上角位置，保证鼠标所按位置拖拽
div.style.left=e.clientX-e1.offsetX+"px";
div.style.top=e.clientY-e1.offsetY+"px";
}
// 当释放鼠标键时，删除鼠标移动事件和删除鼠标释放事件
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;
}
}
</script>
第二种写法
<script>
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)
}
}
</script>
第三种写法
<script>
var divs=document.querySelectorAll("div");
for(var i=0;i<divs.length;i++){
divs[i].addEventListener("mousedown",mouseHandler);
}
function mouseHandler(e){
if(e.type==="mousedown"){
e.preventDefault();
// this 是按下的元素
// document.div=this;
document.div=e.target;
document.offset={x:e.offsetX,y:e.offsetY};
document.addEventListener("mousemove",mouseHandler)
document.addEventListener("mouseup",mouseHandler)
}else if(e.type==="mousemove"){
// this document
// this.div 按下的元素
document.div.style.left=e.clientX-document.offset.x+"px";
document.div.style.top=e.clientY-document.offset.y+"px";
}else if(e.type==="mouseup"){
document.removeEventListener("mousemove",mouseHandler)
document.removeEventListener("mouseup",mouseHandler)
}
}
</script>
