javascript實作PC網頁裡的拖曳效果_javascript技巧

幾年前，我參與設計開發一個房產網的項目，我負責前端工作，由於專案經理要求比較高，參考了很多房產類網站比較優秀的功能，想把別人比較優秀的設計和想法集合到一起，那時的設計稿和功能實現，簡直就是改了又改，今天做好的一個很好的效果，可能第二天就要推到重來，算了，不說這些了，還是說說我們今天要講解的案例吧，不知道大家訪問過搜房網沒有（完全沒有做廣告之嫌，搜房網，可以給點廣告費不），其中有一個功能產品經理特別喜歡，那，就是下面的這個：

這是現在的效果，可能改了一些，原來的效果是，裡面的這張圖是可以上下左右拖動的，然後房子上面的顯示的樓棟號，也跟著圖片一起移動，當時js能力還不行，未能實現專案經理的要求，不過後來專案經理又把這個效果推掉了，換了另外的一個效果

儘管專案經理不想要這個效果了，但是當時就在我心裡留下了一個節，到今天都忘不了這個梗。

好了，這就是我今天想寫這篇部落格的初衷，希望能給想實現這類拖曳效果，但是不知道該怎麼去實現的同學，提供一種思路，不給青春留遺憾，當然實作拖曳的方法很多，這裡就只介紹JavaScript中的一種方法，慢慢體會一下其中的原理！

好了，梗也說完了，開始正題，我們先要明白，拖曳到底是一個什麼東西，你也知道，我也知道，但是我還是想來描述一下：

拖曳就是一個容器，你用滑鼠可以在頁面上拖著到處跑，廢話，精確的描述應該是，滑鼠移到容器上，然後滑鼠按下去，注意要按著不放，然後拖曳滑鼠，容器能跟著滑鼠跑，放開滑鼠，容器就停在那裡不動了，現實中的例子就是桌子上有一個盒子，我用手放在盒子上，然後移動盒子，手停盒子停，手拿開，盒子不動了，嘻嘻，都懂了哈！

別以為上面說了一堆的廢話，我們可以從中得到很多的信息，總結如下就是：

拖曳 = 滑鼠按下 + 滑鼠移動 + 老鼠彈上

這樣就完成了一個拖曳任務，好了，原來這就是拖曳的原理，想實現拖曳，自然實現上面的3個動作，便可以模擬拖曳效果，好，對應JavaScript中的語法就是需要實現這3個動作：

onmousedown , onmousemove , onmouseup

 實現的程式碼就應該是：

obj.onmousedown = function(ev){
   obj.onmousemove = function(ev){
 
   } ;
   obj.onmouseup = function(ev){
   
   };
   
}

為什麼後面2個動作要寫的裡面，好好回味一下，好了，第一步的大概思路就有了，下一步就需要考慮怎麼讓物體跟著滑鼠一起移動，思路大概是這樣的：

首先物體是需要決定定位的，因為我們需要操作它的left和top值，才能讓它移動，然後就是要考慮滑鼠了，滑鼠位移，本身就會有一個距離，如果我們知道滑鼠移動了多遠，然後把這個距離給物體，那物體是不是也和滑鼠一樣，移動了相同的距離，這不就實現拖曳了嗎？哈哈，思路一點點有，感覺萌萌噠~ 現在的問題就是怎麼獲取滑鼠的距離，如果需要深入了解，請複習一下盒子模型，這裡我就不說了，很多大神也有相關的博客，我用一張圖表示一下：

說明：藍色框為螢幕寬高，黑色粗框為瀏覽器可視區寬高（瀏覽器縮小效果），黑色細框為滑鼠要拖曳的對象，如圖可知，取得滑鼠的座標，可以用event.clientX,event.clientY來獲取，喔了；

計算的大致原理可以參考下圖：

說明：左邊為初始位置，右邊為目標位置，原點為滑鼠位置，大黑框為瀏覽器可視寬度，小黑框為拖曳對象，看拖曳對像到目標位置的狀態，取得滑鼠的最終位置，再減去滑鼠距離物件的差值，再賦值給物件的top,left值，也可以取得滑鼠的位置差值，再用初始的top,left值加上差值，我們採用第一種，第二種也可以，自己去試試看：

 obj.onmousedown = function(ev){
  var ev = ev || event;
  var disX = ev.clientX - this.offsetLeft,disY = ev.clientY - this.offsetTop;
 
  document.onmousemove = function(ev){
    var ev = ev || event;
    obj.style.left = ev.clientX - disX + 'px';
    obj.style.top = ev.clientY - disY + 'px';
  };
  document.onmouseup = function(ev){
    var ev = ev || event;
    document.onmousemove = document.onmouseup = null;
  };
}

这里说明一下：onmousemove和onmouseup之所以用document对象而不用obj对象，是因为如果用obj对象，鼠标在obj内部还好，如果在obj外面的话，拖拽会很怪异，你也可以改成obj体会一下，最后我们在鼠标弹起的时候将事件都清空；

上面的基本拖拽就算完成了，但是细心的同学一定会问，如果页面上有文字的话，拖拽物体会将文字选中，这效果岂不是怪怪的，没错，这是因为拖拽的时候触发了浏览器的默认选择事件，所以，在拖拽的时候，我们要清除这个默认事件，那怎么清除呢？

下面给一个兼容性写法：

if(ev.stopPropagation){
   ev.stopPropagation();
}else{
  ev.cancelBubble = true; //兼容IE
}
//简写成
ev.stopPropagation ? ev.stopPropagation() : ev.cancelBubble = true;

将上面的代码放在onmousedown下，鼠标按下就清除浏览器默认事件，文字就不会被选中了，好了，一个简单的拖拽效果就完成了，当然你现在是看不到效果，之所以不给demo链接是为了让你自己试着写一写，这样印象更深刻，

好了，那问题又来了，到这里就这样完了吗？。。。。。。按本人的风格，当然没有，干货还在后面！

如果我想实现这样一个效果，就是这一个大的容器里面（可以是box，也可以是document），怎么样能让我们的拖拽对象不跑出去呢，换句话说，拖到边缘就拖不动了，耶，是不是很多人想要实现的效果，哈哈，我们看看实现的原理是什么：

现实生活中，一个物体在一个盒子里跑不出去，是因为有堵墙，那我们只要能模拟出这堵墙，就可以把物体框起来，那这堵墙要怎么做呢？我们可以换个思路，当拖拽对象拖到边缘的时候，比如说拖到右边，我们将它的left固定住，是不是就不能再往右了，因为left值不能再加了，那么拖到底部，同理我们将top值固定住，就不能再往下拖了，理解吗？

最终的结果就是如下：

//左侧
if(obj.offsetLeft <=0){
  obj.style.left = 0;
};
//右侧
if(obj.offsetLeft >= pWidth - oWidth){
  obj.style.left = pWidth - oWidth + 'px'; 
};
//上面
if(obj.offsetTop <= 0){
  obj.style.top = 0; 
};
//下面
if(obj.offsetTop >= pHeight - oHeight){
  obj.style.top = pHeight - oHeight + 'px'; 
};

说明：pWidth,pHeight 表示父级元素的宽高（这里是表示相对于父级的宽高限制），oWidth,oHeigt表示拖拽元素的宽高

最后，我将整个拖拽代码整理了一下：

/*
      参数说明：
      元素绝对定位，父级相对定位，如果父级为window，则可以不用
      传一个参数，表示父级为window，物体相对于window范围拖动
      传2个参数，则父级为第二个参数，物体相对于父级范围拖动
      参数为id值
    */
    function drag(obj,parentNode){
      var obj = document.getElementById(obj);
      if(arguments.length == 1){
        var parentNode = window.self; 
        var pWidth = parentNode.innerWidth,pHeight = parentNode.innerHeight;  
      }else{
        var parentNode = document.getElementById(parentNode);
        var pWidth = parentNode.offsetWidth,pHeight = parentNode.offsetHeight;
      }
      obj.onmousedown = function(ev){
        var ev = ev || event;
        var disX = ev.clientX - this.offsetLeft,disY = ev.clientY - this.offsetTop;
        var oWidth = obj.offsetWidth,oHeight = obj.offsetHeight;
         
        //阻止冒泡时间
        ev.stopPropagation ? ev.stopPropagation() : ev.cancelBubble = true;
       
         
        document.onmousemove = function(ev){
          var ev = ev || event;
          obj.style.left = ev.clientX - disX + 'px';
          obj.style.top = ev.clientY - disY + 'px';
           
          //左侧
          if(obj.offsetLeft <=0){
            obj.style.left = 0;
          };
          //右侧
          if(obj.offsetLeft >= pWidth - oWidth){
            obj.style.left = pWidth - oWidth + 'px'; 
          };
          //上面
          if(obj.offsetTop <= 0){
            obj.style.top = 0; 
          };
          //下面
          if(obj.offsetTop >= pHeight - oHeight){
            obj.style.top = pHeight - oHeight + 'px'; 
          };
        };
        document.onmouseup = function(ev){
          var ev = ev || event;
          document.onmousemove = document.onmouseup = null;
        };
      }
         
    }

说明：我这里处理的效果是，如果传一个参数，表示相对的对象是window对象，如果传2个参数，第一个是拖拽对象，第二个为相对父级

开篇就说了，搜房网的那个图片拖拽效果是我的一个心结，我写了一个类似的效果，供大家参考，因为自己没有买服务器，所以效果我就不展示了，直接把代码贴出来，供大家参考：

css：

<style>
.box{
  width:600px;
  height:400px;
  margin:50px auto;
  position:relative;
  overflow:hidden;
}
#box{
  width:1000px;
  height:800px;
  position:absolute;
  left:50%;
  top:50%;
  margin:-400px 0 0 -500px;
}
#pic{ width:800px; height:600px; background:url(images/pic1.jpg) no-repeat; position:absolute; left:100px; top:100px; }
#pic:hover{
  cursor:move;
}
</style>

html:

<div class="box">
    <div id="box">
      <div id="pic"></div>
    </div>
  </div>

javascript:

window.onload = function(){
     
    drag("pic","box");
    function drag(obj,parentNode){
      var obj = document.getElementById(obj);
      if(arguments.length == 1){
        var parentNode = window.self; 
        var pWidth = parentNode.innerWidth,pHeight = parentNode.innerHeight;  
      }else{
        var parentNode = document.getElementById(parentNode);
        var pWidth = parentNode.offsetWidth,pHeight = parentNode.offsetHeight;
      }
      obj.onmousedown = function(ev){
        var ev = ev || event;
        var disX = ev.clientX - this.offsetLeft,disY = ev.clientY - this.offsetTop;
        var oWidth = obj.offsetWidth,oHeight = obj.offsetHeight;
         
        //阻止冒泡时间
        ev.stopPropagation ? ev.stopPropagation() : ev.cancelBubble = true;
       
         
        document.onmousemove = function(ev){
          var ev = ev || event;
          obj.style.left = ev.clientX - disX + 'px';
          obj.style.top = ev.clientY - disY + 'px';
           
          //左侧
          if(obj.offsetLeft <=0){
            obj.style.left = 0;
          };
          //右侧
          if(obj.offsetLeft >= pWidth - oWidth){
            obj.style.left = pWidth - oWidth + 'px'; 
          };
          //上面
          if(obj.offsetTop <= 0){
            obj.style.top = 0; 
          };
          //下面
          if(obj.offsetTop >= pHeight - oHeight){
            obj.style.top = pHeight - oHeight + 'px'; 
          };
        };
        document.onmouseup = function(ev){
          var ev = ev || event;
          document.onmousemove = document.onmouseup = null;
        };
      }
         
    }
     
     
  }

效果完全是用的那个封装代码块，引用起来也挺方便，有人会问了，你这用的id获取DOM元素，一个页面只能用一次啊，如果页面多次使用呢，有道理，解决方案之一，那就命名不同的id呗，又不犯法，方案二，获取id的地方改成获取class，但是要注意的是，getElementsByClassName是获取的class集合，需要改写一下，这里我就不写了，有兴趣的同学自行改写一下，好了，到这里真的结束了！