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不要忘记