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拖拽分析