jQuery使用drag效果實現自由拖曳div_jquery-js教程-PHP中文網

jQuery使用drag效果實現自由拖曳div_jquery

WBOY

發布： 2016-05-16 15:55:34

原創

1397 人瀏覽過

偶然間看到了以前做的一個簡潔的div拖曳效果，修改了一下加點註釋，經測試完美通過firefox/chrome/ie6-11，現拿來分享一下。

先說一下實現原理及要點，最主要的有三步驟。第一步是mousedown事件，滑鼠mousedown的時候記錄此時的滑鼠X軸和Y軸以及拖曳框的left和top，並且給拖曳標記賦值true，代表拖曳動作就緒。第二步是mousemove事件，此時動態取得滑鼠的X軸和Y軸，然後計算出來拖曳框架新的left和top並賦值使其達到拖曳效果。第三步是mouseup事件，滑鼠彈起時給拖曳標記賦值false，拖曳動作完成。

html程式碼如下：

<div class="divWrap" id="move1" style="width: 200px; height: 200px; background: Green; border: 1px solid red; position: absolute; top: 100px; left: 100px; cursor: move; -moz-user-select: none; -webkit-user-select: none;"></div>
<div class="divWrap" style="width: 200px; height: 200px; background: brown; border: 1px solid red; position: absolute; top: 300px; left: 100px;">
  <h3 id="move2" style="height: 45px; line-height: 45px; font-size: 18px; background: red; margin: 0; cursor: move; -moz-user-select: none; -webkit-user-select: none;">Title--Move</h3>
</div>

登入後複製

js程式碼如下：

(function($) {
  $.fn.dragDiv = function(divWrap) {
    return this.each(function() {
      var $divMove = $(this);//鼠标可拖拽区域
      var $divWrap = divWrap &#63; $divMove.parents(divWrap) : $divMove;//整个移动区域
      var mX = 0, mY = 0;//定义鼠标X轴Y轴
      var dX = 0, dY = 0;//定义div左、上位置
      var isDown = false;//mousedown标记
      if(document.attachEvent) {//ie的事件监听，拖拽div时禁止选中内容，firefox与chrome已在css中设置过-moz-user-select: none; -webkit-user-select: none;
        $divMove[0].attachEvent('onselectstart', function() {
          return false;
        });
      }
      $divMove.mousedown(function(event) {
        var event = event || window.event;
        mX = event.clientX;
        mY = event.clientY;
        dX = $divWrap.offset().left;
        dY = $divWrap.offset().top;
        isDown = true;//鼠标拖拽启动
      });
      $(document).mousemove(function(event) {
        var event = event || window.event;
        var x = event.clientX;//鼠标滑动时的X轴
        var y = event.clientY;//鼠标滑动时的Y轴
        if(isDown) {
          $divWrap.css({"left": x - mX + dX, "top": y - mY + dY});//div动态位置赋值
        }
      });
      $divMove.mouseup(function() {
        isDown = false;//鼠标拖拽结束
      });
    });
  };
})(jQuery);
//
$(document).ready(function() {
  $("#move1").dragDiv();//拖拽整个div
  $("#move2").dragDiv(".divWrap");//拖拽div头部
});

登入後複製

最後要說明一下，在開始拖曳動作之前，要禁止選取內容，否則影響拖曳效果。 firefox和chrome可以透過css來設定：{-moz-user-select: none; -webkit-user-select: none;}，ie本來也可以直接在html裡寫一個onselectstart="return false"，但似乎chrome受了點影響，所以決定取消這個寫法，然後在js裡為ie瀏覽器寫一個onselectstart事件。

這個小插件只是簡單實現拖曳效果，但相容性很好，裡面也用到了一些知識點和技巧。當然也可以藉助這個插件或裡面的想法繼續擴展，寫一個比較完善的拖曳插件（如：Draggable和Droppable）。

以上所述就是本文的全部內容了，希望大家能夠喜歡。