前端學(xué)習(xí)筆記の拖拽（一）原生基礎(chǔ)篇

前端學(xué)習(xí)筆記の拖拽（一）#

源碼地址：https://github.com/WZOnePiece/study-draggable
引言：9月開始的半個(gè)月，由于項(xiàng)目和一些朋友的詢問，我接觸了關(guān)于前端拖拽的一些問題。不過本人由于只是一個(gè)前端菜鳥，接觸前端時(shí)間滿打滿算，從0到現(xiàn)在也就一年左右，對(duì)于一些知識(shí)了解的還不是很全面和深刻。所以，我就打算好好學(xué)習(xí)下前端拖拽得一些相關(guān)知識(shí)。這就是這篇“史詩級(jí)的錦繡文章”的誕生記O(∩_∩)O。
借鑒：http://www.cnblogs.com/lrzw32/p/4696655.html

js拖拽插件的原理##

常見的拖拽操作是什么樣的呢？整過過程大概有下面幾個(gè)步驟：

1、用鼠標(biāo)點(diǎn)擊被拖拽的元素

2、按住鼠標(biāo)不放，移動(dòng)鼠標(biāo)

3、拖拽元素到一定位置，放開鼠標(biāo)

這里的過程涉及到三個(gè)dom事件：onmousedown,onmousemove,onmouseup。所以拖拽的基本思路就是：

1、用鼠標(biāo)點(diǎn)擊被拖拽的元素觸發(fā)onmousedown

（1）設(shè)置當(dāng)前元素的可拖拽為true，表示可以拖拽

（2）記錄當(dāng)前鼠標(biāo)的坐標(biāo)x,y

（3）記錄當(dāng)前元素的坐標(biāo)x,y

2、移動(dòng)鼠標(biāo)觸發(fā)onmousemove

（1）判斷元素是否可拖拽，如果是則進(jìn)入步驟2，否則直接返回

（2）如果元素可拖拽，則設(shè)置元素的坐標(biāo)

元素的x坐標(biāo) = 鼠標(biāo)移動(dòng)的橫向距離+元素本來的x坐標(biāo) = 鼠標(biāo)現(xiàn)在的x坐標(biāo) - 鼠標(biāo)之前的x坐標(biāo) + 元素本來的x坐標(biāo)

元素的y坐標(biāo) = 鼠標(biāo)移動(dòng)的橫向距離+元素本來的y坐標(biāo) = 鼠標(biāo)現(xiàn)在的y坐標(biāo) - 鼠標(biāo)之前的y坐標(biāo) + 元素本來的y坐標(biāo)

3、放開鼠標(biāo)觸發(fā)onmouseup

（1）將鼠標(biāo)的可拖拽狀態(tài)設(shè)置成false

基本效果##

在實(shí)現(xiàn)基本的效果之前，有幾點(diǎn)需要說明的：

1、元素想要被拖動(dòng)，它的postion屬性一定要是relative或absolute

2、通過event.clientX和event.clientY獲取鼠標(biāo)的坐標(biāo)

3、onmousemove是綁定在document元素上而不是拖拽元素本身，這樣能解決快速拖動(dòng)造成的延遲或停止移動(dòng)的問題

代碼如下：

var dragObj = document.getElementById("test");
dragObj.style.left = "0px";
dragObj.style.top = "0px";

var mouseX, mouseY, objX, objY;
var dragging = false;

dragObj.onmousedown = function (event) {
    event = event || window.event;

    dragging = true;
    dragObj.style.position = "relative";

    mouseX = event.clientX;
    mouseY = event.clientY;
    objX = parseInt(dragObj.style.left);
    objY = parseInt(dragObj.style.top);
}

document.onmousemove = function (event) {
    event = event || window.event;
    if (dragging) {

        dragObj.style.left = parseInt(event.clientX - mouseX + objX) + "px";
        dragObj.style.top = parseInt(event.clientY - mouseY + objY) + "px";
    }

}

document.onmouseup = function () {
    dragging = false;
}

代碼抽象和優(yōu)化##

上面的代碼要做成插件，要將其抽象出來，基本思路如下：

; (function (window, undefined) {            

        function Drag(ele) {}

        window.Drag = Drag;
    })(window, undefined);

用自執(zhí)行匿名函數(shù)將代碼包起來，內(nèi)部定義Drag方法并暴露到全局中，直接調(diào)用Drag，傳入被拖拽的元素。

前面加入； 避免一些不必要錯(cuò)誤。

首先對(duì)一些常用的方法進(jìn)行簡單的封裝：

; (function (window, undefined) {
        var dom = {
            //綁定事件
            on: function (node, eventName, handler) {
                if (node.addEventListener) {
                    node.addEventListener(eventName, handler);
                }
                else {
                    node.attachEvent("on" + eventName, handler);
                }
            },
            //獲取元素的樣式
            getStyle: function (node, styleName) {
                var realStyle = null;
                if (window.getComputedStyle) {
                    realStyle = window.getComputedStyle(node, null)[styleName];
                }
                else if (node.currentStyle) {
                    realStyle = node.currentStyle[styleName];
                }
                return realStyle;
            },
            //獲取設(shè)置元素的樣式
            setCss: function (node, css) {
                for (var key in css) {
                    node.style[key] = css[key];
                }
            }
        };
      
        window.Drag = Drag;
    })(window, undefined);

在一個(gè)拖拽操作中，存在著兩個(gè)對(duì)象：被拖拽的對(duì)象和鼠標(biāo)對(duì)象，我們定義了下面的兩個(gè)對(duì)象以及它們對(duì)應(yīng)的操作：

首先的拖拽對(duì)象，它包含一個(gè)元素節(jié)點(diǎn)和拖拽之前的坐標(biāo)x和y：

function DragElement(node) {
    this.node = node;//被拖拽的元素節(jié)點(diǎn)
    this.x = 0;//拖拽之前的x坐標(biāo)
    this.y = 0;//拖拽之前的y坐標(biāo)
}
DragElement.prototype = {
    constructor: DragElement,
    init: function () {                    
        this.setEleCss({
            "left": dom.getStyle(node, "left"),
            "top": dom.getStyle(node, "top")
        })
        .setXY(node.style.left, node.style.top);
    },
    //設(shè)置當(dāng)前的坐標(biāo)
    setXY: function (x, y) {
        this.x = parseInt(x) || 0;
        this.y = parseInt(y) || 0;
        return this;
    },
    //設(shè)置元素節(jié)點(diǎn)的樣式
    setEleCss: function (css) {
        dom.setCss(this.node, css);
        return this;
    }
}

還有一個(gè)對(duì)象是鼠標(biāo)，它主要包含x坐標(biāo)和y坐標(biāo)：

function Mouse() {
        this.x = 0;
        this.y = 0;
    }
Mouse.prototype.setXY = function (x, y) {
    this.x = parseInt(x);
    this.y = parseInt(y);
}

這是在拖拽操作中定義的兩個(gè)對(duì)象。

如果一個(gè)頁面可以有多個(gè)拖拽元素，那應(yīng)該注意什么：

1、每個(gè)元素對(duì)應(yīng)一個(gè)拖拽對(duì)象實(shí)例

2、每個(gè)頁面只能有一個(gè)正在拖拽中的元素

為此，我們定義了唯一一個(gè)對(duì)象用來保存相關(guān)的配置：

 var draggableConfig = {
     zIndex: 1,
   draggingObj: null,
     mouse: new Mouse()
};

這個(gè)對(duì)象中有三個(gè)屬性：

（1）zIndex：用來賦值給拖拽對(duì)象的zIndex屬性，有多個(gè)拖拽對(duì)象時(shí)，當(dāng)兩個(gè)拖拽對(duì)象重疊時(shí)，會(huì)造成當(dāng)前拖拽對(duì)象有可能被擋住，通過設(shè)置zIndex使其顯示在最頂層

（2）draggingObj：用來保存正在拖拽的對(duì)象，在這里去掉了前面的用來判斷是否可拖拽的變量，通過draggingObj來判斷當(dāng)前是否可以拖拽以及獲取相應(yīng)的拖拽對(duì)象

（3）mouse：唯一的鼠標(biāo)對(duì)象，用來保存當(dāng)前鼠標(biāo)的坐標(biāo)等信息

最后是綁定onmousedown，onmouseover，onmouseout事件，整合上面的代碼如下：

/*
  author: NARUTOne,wz;
  creatTime: 2016/9/20;
  developing: 可以擴(kuò)展：添加父元素限制；多個(gè)同級(jí)元素拖拽順序排列等。
*/

; (function(window, undefined) {
  // 拖拽對(duì)象的事件綁定；樣式獲取、設(shè)置
  var dom = {
    on: function(node, eventName, handler) {
      if(node.addEventListener) {
        console.log(node);
        node.addEventListener(eventName, handler, false);
      }
      else {//IE
        node.attachEvent("on" + eventName, handler);
      }
    },
    getStyle: function(node, styleName) {
      var realStyle = null;
      if(window.getComputedStyle) {
        realStyle = window.getComputedStyle(node,null)[styleName];
      }
      else if(node.currentStyle) {//IE
        realStyle = node.currentStyle[styleName];
      }
      else if(node.style) {
        realStyle = node.style[styleName];
      }
      return realStyle;
    },
    setCss: function(node, css) {
      for(var key in css) {
        node.style[key] = css[key];
      }
    }
  };

// 拖拽對(duì)象定義
  function DragElement(node) {
    this.node = node;
    this.x = 0;
    this.y = 0;
  }

  DragElement.prototype = {
    constructor: DragElement,
    init: function() {
      this.setEleCss({
        "left": dom.getStyle(node, "left"),
        "top": dom.getStyle(node, "top")
      })
      .setXY(node.style.left, node.style.top)
    },
    // 設(shè)置當(dāng)前坐標(biāo)
    setXY: function(x, y) {
      this.x = parseInt(x) || 0;
      this.y = parseInt(y) || 0;
      return this;
    },
    // 設(shè)置元素節(jié)點(diǎn)的樣式
    setEleCss: function(css) {
      dom.setCss(this.node, css);
      return this;
    }
  }

  // 鼠標(biāo)對(duì)象
  function Mouse() {
    this.x = 0;
    this.y = 0;
  }
  Mouse.prototype.setXY = function(x, y) {
    this.x = parseInt(x);
    this.y = parseInt(y);
  }

  // 拖拽配置
  var draggableConfig = {
    zIndex: 1,
    draggingObj: null,
    mouse: new Mouse(),
    parent:document,
    dragEle:null
  }

  // 拖拽實(shí)現(xiàn)
  function Drag(ele,parent) {
    this.ele = ele;

    function mouseDown(event) {
      var elem = this;

      draggableConfig.mouse.setXY(event.clientX, event.clientY);

      draggableConfig.draggingObj = new DragElement(elem);

      draggableConfig.draggingObj
        .setXY(elem.style.left, elem.style.top)
        .setEleCss({
          "zIndex": draggableConfig.zIndex ++,
          "position": "absolute"
        });
    }
    draggableConfig.parent = parent;
    draggableConfig.dragEle = ele;
    ele.onselectstart = function() {
      // 防止拖拽對(duì)象內(nèi)文字被選中
      return false;
    }
    dom.on(ele, "mousedown", mouseDown);
  }

  dom.on(draggableConfig.parent, "mousemove", function(e) {
    if(draggableConfig.draggingObj) {
      var mouse = draggableConfig.mouse,
        draggingObj = draggableConfig.draggingObj;
        // 這里可以添加限制，拖拽不脫離父元素
      var p_height = draggableConfig.parent.offsetHeight;
      var p_width = draggableConfig.parent.offsetWidth;
      var c_height = draggableConfig.dragEle.offsetHeight;
      var c_width = draggableConfig.dragEle.offsetWidth;
      var left, top = 0;

      if(event.clientX - mouse.x + draggingObj.x < 0) {
        left = 0;
      }
      else if((event.clientX - mouse.x + draggingObj.x) > (p_width - c_width)) {
        left = p_width - c_width;
      }
      else {
        left = event.clientX - mouse.x + draggingObj.x;
      }

      if(event.clientY - mouse.y + draggingObj.y < 0) {
        top = 0;
      }
      else if((event.clientY - mouse.y + draggingObj.y) > (p_height - c_height)) {
        top = p_height - c_height;
      }
      else {
        top = event.clientY - mouse.y + draggingObj.y;
      }

      draggingObj.setEleCss({
        "left": parseInt(left) + "px",
        "top": parseInt(top) + "px"
      })
    }
  })

  dom.on(draggableConfig.parent, "mouseup", function(event) {
    draggableConfig.draggingObj = null;
  })

  window.Drag = Drag;

})(window,undefined);

調(diào)用方法：Drag(document.getElementById("obj"));

注意點(diǎn)：為了防止選中拖拽元素中的文字，通過onselectstart事件處理程序return false來處理這個(gè)問題?；蛘遚ss3中的user-select:none;
srcElement是IE下的屬性，target是Firefox下的屬性，Chrome瀏覽器同時(shí)有這兩個(gè)屬性。
當(dāng)然這個(gè)也是可以按照需要進(jìn)行定制化擴(kuò)展等。

擴(kuò)展：有效拖拽##

有時(shí)，會(huì)遇到一些拖拽需求，只能拖拽需要拖拽模塊的部分區(qū)域，這時(shí)怎樣實(shí)現(xiàn)呢？

思路：首先優(yōu)化拖拽元素對(duì)象如下，增加一個(gè)目標(biāo)元素target，表示被拖拽對(duì)象，在上圖的登錄框中，就是整個(gè)登錄窗口。
被記錄和設(shè)置坐標(biāo)的拖拽元素就是這個(gè)目標(biāo)元素，但是它并不是整個(gè)部分都是拖拽的有效部分。我們?cè)趆tml結(jié)構(gòu)中為拖拽的有效區(qū)域添加類draggable表示有效拖拽區(qū)域：

<div id="drag">
    <h3 class='drag-title'>拖拽主體</h3>
    <div class="drag-body">
        內(nèi)容主體
    </div>
</div>

js部分：

function Drag(ele,parent) {
    this.ele = ele;
    var drag = ele.getElementsByClassName('drag-title')[0] || ele
    function mouseDown(event) {
      var elem = this ;
      draggableConfig.mouse.setXY(event.clientX, event.clientY);
      draggableConfig.draggingObj = new DragElement(ele);
      draggableConfig.draggingObj
        .setXY(ele.style.left, ele.style.top)
        .setEleCss({
          "zIndex": draggableConfig.zIndex ++,
          "position": "absolute"
        });
    }
    draggableConfig.parent = parent;
    draggableConfig.dragEle = ele;
    ele.onselectstart = function() {
      // 防止拖拽對(duì)象內(nèi)文字被選中
      return false;
    }
    dom.on(drag, "mousedown", mouseDown);
  }

性能優(yōu)化##

由于onmousemove在一直調(diào)用，會(huì)造成一些性能問題，我們可以通過setTimout來延遲綁定onmousemove事件，改進(jìn)move函數(shù)如下：

 setTimeout(function () {
    dom.on(document, "mousemove", function(e){
    
    });
 }, 25);

接下來的拖拽（二）將會(huì)去學(xué)習(xí)下H5中拖拽，敬請(qǐng)下回分解哈，O(∩_∩)O哈哈~

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容