<body>
　　<div class="box" id="box1"><div class="main"><div class="bar">拖拽區(qū)</div><div class="content">內(nèi)容區(qū)塊</div></div></div>
　　<div class="box" id="box2"><div class="main"><div class="bar">拖拽區(qū)</div><div class="content">內(nèi)容區(qū)塊</div></div></div>
　　<div class="box" id="box3"><div class="main"><div class="bar">拖拽區(qū)</div><div class="content">內(nèi)容區(qū)塊</div></div></div>
</body>

2、css

<style type="text/css">
  .box{position:absolute;left:100px;top:100px;padding: 5px;box-shadow:2px 2px 4px #666666; font-size:12px;}
  #box2{left:500px;}
  #box3{left:900px; }
  .main{border:1px solid #a0b3d6;background-color: #fff; }
  .bar{line-height:24px;padding-left:5px;border-bottom:1px solid #a0b3d6;background-color:#beceeb;cursor:move;}
  .content{padding: 10px 5px;height:200px;width:250px;}
</style>

3、js

// 定義Drag構(gòu)造函數(shù)，并設(shè)置每個(gè)實(shí)例的特權(quán)屬性（也就是將來要?jiǎng)?chuàng)建的每個(gè)實(shí)例對象私有的屬性）；
function Drag(bar, target) {
  // 此處的bar是指觸發(fā)拖拽事件的對象；
  this.bar = bar;

  // 此處的target是值實(shí)際上被拖動(dòng)的對象；
  this.target = target;

  // 這個(gè)flag相當(dāng)于是一個(gè)開關(guān)，用于判斷事件是否能夠執(zhí)行；
  this.flag = false;
}
// 構(gòu)造函數(shù)原型上添加方法，也是為其實(shí)例添加公用方法公用方法；
Drag.prototype = {
  // 重新聲明原型的constructor屬性，也就是為實(shí)例指定正真的創(chuàng)建者；這里不重新指定也沒問題，就是為了。。。
  constructor : Drag,

  // 初始化每個(gè)實(shí)例的屬性，為綁定事件做好準(zhǔn)備；
  init : function(){
    // 這邊的this其實(shí)是指調(diào)用這個(gè)init函數(shù)方法的那個(gè)對象，也就是我們所創(chuàng)建的實(shí)例；
    // 這么寫有好處，代碼執(zhí)行到綁定事件那一塊再詳細(xì)的講；
    var temp = this;

    // 獲取實(shí)例對象上最先設(shè)定的樣式值，這邊就是left和top屬性；
    temp.left = temp.getCss(temp.target, "left");
    temp.top = temp.getCss(temp.target, "top");

    // 預(yù)先聲明下面要用的到值，這邊是指儲(chǔ)存鼠標(biāo)點(diǎn)下去的瞬間鼠標(biāo)相對于屏幕的位置（clientX、clientY）
    temp.mousePosX = null;
    temp.mousePosY = null;

    // 發(fā)出為實(shí)例對象綁定事件的命令；
    temp.bindEvent();
  },
  //
  getCss : function(o , prop){
    // Dom對象的style屬性指向的對象只能獲得嵌入式樣式的值，比如<a style="..."></a>，這種寫在元素內(nèi)部的可以獲得；
    // 但是通過外聯(lián)樣式表和內(nèi)聯(lián)樣式表設(shè)置的樣式值，只能通過以下方法獲得，currentStyle對應(yīng)的是Ie，另一個(gè)對應(yīng)的是其他瀏覽器；
    return o.currentStyle ? o.currentStyle[prop] : document.defaultView.getComputedStyle(o, null)[prop];
  },
  bindEvent : function(){
    // 先把調(diào)用這個(gè)bindEvent方法的this對象（也就是我們創(chuàng)建的實(shí)例對象）傳遞給temp變量，于是temp也就指向了實(shí)例對象；
    // 因此，在當(dāng)前函數(shù)的執(zhí)行環(huán)境內(nèi)，想要調(diào)用這個(gè)實(shí)例對象，而不必要使用this了，因?yàn)榇藭r(shí)的this可能指向的其他的對象；
    // 比如，在為某個(gè)對象綁定事件的時(shí)候，這個(gè)事件內(nèi)部的this肯定是指向綁定的對象的，而不是我們想要的最開始的那個(gè)“this”
    var temp = this;

    // 監(jiān)聽鼠標(biāo)點(diǎn)下的事件函數(shù)
    temp.bar.onmousedown = function(e){
      // 這邊的e是指事件對象，老Ie不能直接使用，得通過window.event來引用；
      e = e || window.event;

      // 點(diǎn)下的瞬間就把這個(gè)開關(guān)打開，表明現(xiàn)在可以拖動(dòng)了；
      temp.flag = true;

      // 獲取鼠標(biāo)相對與瀏覽器窗口的位置，并且賦值給實(shí)例對象的mousePos屬性；
      temp.mousePosX = e.clientX;
      temp.mousePosY = e.clientY;
    };

    // 監(jiān)聽鼠標(biāo)移動(dòng)事件，注意這個(gè)綁定到document對象上的事件，因?yàn)槭髽?biāo)在整個(gè)文檔上移動(dòng)；
    // 這邊不能用onmousemove方法綁定事件，因?yàn)槲覀兊膶?shí)例可能有多個(gè)，如果用次方法，最后初始化的那個(gè)實(shí)例才綁定到事件函數(shù)；
    document.addEventListener('mousemove' ,function(e){
      e = e || window.event;

      // 因?yàn)樵谑髽?biāo)點(diǎn)下的時(shí)候，已經(jīng)指定flag為true了，所以下面的代碼才會(huì)執(zhí)行；
      // 如果沒有這個(gè)開關(guān)控制，我們移動(dòng)鼠標(biāo)的時(shí)候，我們創(chuàng)建的實(shí)例對象都要移動(dòng)；
      if(temp.flag){

        // （e.clientX - temp.mousePosX）代表了鼠標(biāo)自按下后滑動(dòng)的距離；
        // parseInt(temp.left)是指鼠標(biāo)還沒滑動(dòng)時(shí)，被拖動(dòng)對象的初始位置；
        temp.target.style.left = parseInt(temp.left) + e.clientX - temp.mousePosX + "px";
        temp.target.style.top = parseInt(temp.top) + e.clientY - temp.mousePosY + "px";
      }
    });

    // 鼠標(biāo)放開后事件
    document.addEventListener('mouseup', function(e){
      // 鼠標(biāo)放開后，就把這個(gè)開關(guān)了，就說明拖動(dòng)對象不能被拖動(dòng)了；
      temp.flag = false;

      // 記錄被拖動(dòng)對象的被拖動(dòng)后的位置
      temp.left = temp.getCss(temp.target, "left");
      temp.top = temp.getCss(temp.target, "top");
    });
  }
}

// 獲取Dom元素，oBar是指拖動(dòng)條，oBox是指實(shí)際上拖拽對象；
var oBox = document.getElementsByClassName('box');
var oBar = document.getElementsByClassName('bar');
// 創(chuàng)建實(shí)例對象，注意參數(shù)順序；
var drag1 = new Drag(oBar[0], oBox[0]);
var drag2 = new Drag(oBar[1], oBox[1]);
var drag3 = new Drag(oBar[2], oBox[2]);
// 調(diào)用實(shí)例對象上的init方法，為實(shí)例對象指定設(shè)計(jì)好的操作流程；
drag1.init();
drag2.init();
drag3.init();

具體的過程都通過js注釋說明了，希望能夠幫助大家更好地利用構(gòu)造函數(shù)實(shí)現(xiàn)拖拽效果。

您可能感興趣的文章: