欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JS實現(xiàn)拖拽的方法分析

 更新時間：2016年12月20日 14:56:58   作者：鬼畜十三  
這篇文章主要介紹了JS實現(xiàn)拖拽的方法,結(jié)合實例形式分析了JS拖拽的實現(xiàn)原理、實現(xiàn)技巧與相關(guān)注意事項,需要的朋友可以參考下

本文實例分析了JS實現(xiàn)拖拽的方法。分享給大家供大家參考，具體如下：

分析：

1.鼠標(biāo)按下，拖拽開始，鼠標(biāo)移動，拖拽進(jìn)行，鼠標(biāo)抬起，拖拽結(jié)束（三個事件）

2.被拖動元素與鼠標(biāo)之間的位置在拖動過程中始終不變，利用這個原理，被拖動元素的位置就是鼠標(biāo)的左（上）邊距-鼠標(biāo)與被拖動元素之間的距離

注意：onmousemove應(yīng)該是在onmousedown發(fā)生時進(jìn)行，不然不需要點(diǎn)擊也能拖動了。

用戶可能會將拖動層脫出窗口外。

核心代碼：

window.onload=function(){
  var box=document.getElementById("div");
  var disX;
  var disY;
  box.onmousedown=function(ev){ //如果三個事件都用在box上，拖得快一點(diǎn)，鼠標(biāo)脫離移動層，移動層就拖不動了
    var oEvent=ev||event;
    disX=oEvent.clientX-box.offsetLeft;
    disY=oEvent.clientY-box.offsetTop;
    document.onmousemove=function(ev){
      var oEvent=ev||event;
      var l=oEvent.clientX-disX;
      var t=oEvent.clientY-disY;
      if(l<0){
        l=0;
      }else if(l>document.documentElement.clientWidth-box.offsetWidth){
        l=document.documentElement.clientWidth-box.offsetWidth;
      }
      if(t<0){
        t=0;
      }else if(t>document.documentElement.clientHeight-box.offsetHeight){
        t=document.documentElement.clientHeight-box.offsetHeight;
      }
      box.style.left=l+'px';
      box.style.top=t+'px';
    };
    document.onmouseup=function(){
      document.onmousemove=null;
      document.onmouseup=null; //鼠標(biāo)抬起來后，onmouseup事件本身也沒意義了，所以最好清理掉
    };
    return false; //阻止默認(rèn)行為，空的div在低版本ff下，第二次拖動手型會變異常
  };
}

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript切換特效與技巧總結(jié)》、《JavaScript動畫特效與技巧匯總》、《JavaScript查找算法技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》、《JavaScript中json操作技巧總結(jié)》、《JavaScript錯誤與調(diào)試技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對大家JavaScript程序設(shè)計有所幫助。

相關(guān)文章

最新評論