拖拽的原理
1.獲取距離(鼠標的位置-odiv的外邊距)
2.理解什么時候用onmousemove事件
3.判斷是否過界
html代碼:
<div id="div1"></div>
css代碼:
#div1{width:100px;height:100px;background:red;position:absolute}javascript代碼:
window.onload=function(){  var oDiv=document.getElementById("div1");  var x=0;  var y=0;  oDiv.onmousedown=function(ev){    var oEvent=ev||event;    //鼠標的橫坐標減去div的offsetLeft    x=oEvent.clientX-oDiv.offsetLeft;    //鼠標的縱坐標減去div的offsetTop    y=oEvent.clientY-oDiv.offsetTop;          document.onmousemove=function(ev){      var oEvent=ev||event;         var left=oEvent.clientX-x;      var right=oEvent.clientY-y;      //判斷左邊是否過界      if(left<0){        left=0;      }      //判斷右邊是否過界      else if(left>document.documentElement.clientWidth-oDiv.offsetWidth){        left=document.documentElement.clientWidth-oDiv.offsetWidth;      }      //判斷上邊是否過界      if(right<0){        right=0;      }      //判斷下邊是否過界      else if(right>document.documentElenment.clientHeight){        right=document.documentElenment.clientHeight-oDiv.offsetHeight;      }      oDiv.style.left=left+"px";      oDiv.style.top=right+"px";    }       document.onmouseup=function(){      //清空document的事件      document.onmousemove=null;      document.onmouseup=null;    }    //解決低版本火狐bug,干掉系統默認    return false;  }}以上所述就是本文的全部內容了,希望大家能夠喜歡。
新聞熱點
疑難解答