js拖拽分析
思路
1、三个鼠标事件，mousedown，mousemove，mouseup
2、可移动性absolute
3、边界限制
得到鼠标点击处和div边界的距离，然后得出top 和 left 的值
具体
mousedown
??div.onmousedown=function(event){ ????????var event=event||window.event ????????var diffX=event.clientX-div.offsetLeft ????????var diffY=event.clientY-div.offsetTop ??}diffX/Y得出的是开始点击处和div边界的距离
mousemove
document.onmousemove=function(event){ ????????var event=event||window.event ????????var l=event.clientX-diffX ????????var t=event.clientY-diffY ????????if(t<0){ ?????????????t=0 ?????} ????????if(t>document.documentElement.clientHeight-div.offsetHeight){ ?????????????t=document.documentElement.clientHeight-div.offsetHeight ?????} ????????if(l>document.documentElement.clientWidth-div.offsetWidth){ ?????????????l=document.documentElement.clientWidth-div.offsetWidth ?????} ?????????if(l<0){ ?????????????l=0 ?????} ?????????div.style.left=l+‘px‘ ?????????div.style.top=t+‘px}if后的语句主要是限制边界处而设置的
mouseup
document.onmouseup=function(){ ???????document.onmousemove=null ???????document.onmouseup=null}主要是当鼠标放开时，取消move带来的结果。
当然，还有位置的absolute不要忘记
js拖拽分析
原文地址：https://www.cnblogs.com/iDouble/p/8543870.html