JQ实现拖拽效果

行间拖拽效果

拖拽思路

想实现拖拽我们首先想到需要 3 个事件：

• mousedown 鼠标按下事件
• mousemove 鼠标移动事件
• mouseup 鼠标抬起事件

function drag() {
  $(this).on('mousedown', function () {
    $(document).on('mousemove', function () {
      // 实现元素跟随鼠标移动..
    });
    $(document).on('mouseup', function () {
      // 解绑鼠标移动事件
    });
  });
}

要注意我们不能给被点击的元素去绑定移动事件以及鼠标抬起事件。这样会造成鼠标移动过快离开 dom 元素时，失去监听效果。

错误代码❌：

function drag() {
  var oldX, oldY, newX, newY;
  this.on('mousedown', function (e) {
    $(this).css('position', 'relative');
    oldX = e.clientX;
    oldY = e.clientY;
    var $self = $(this);
    //给元素绑定
    $self.on('mousemove', function (e) {
      var newX = e.clientX,
        newY = e.clientY;
      $self.css('left', '+=' + (newX - oldX));
      $self.css('top', '+=' + (newY - oldY));
      oldX = newX;
      oldY = newY;
      return false;
    });
    //给元素绑定
    $self.on('mouseup', function () {
      $self.off('mousemove');
    });
  });
}

如图所示：

---

正确代码✅ :

$.fn.extend({
  drag: function () {
    var oldX, oldY, newX, newY;
    this.on('mousedown', function (e) {
      $(this).css('position', 'relative');
      oldX = e.clientX;
      oldY = e.clientY;
      var $self = $(this);
      $(document).on('mousemove', function (e) {
        var newX = e.clientX,
          newY = e.clientY;
        $self.css('left', '+=' + (newX - oldX));
        $self.css('top', '+=' + (newY - oldY));
        oldX = newX;
        oldY = newY;
        return false;
      });
      $(document).on('mouseup', function () {
        $(document).off();
      });
    });
  }
});

我在这里将方法封装在了 JQ 原型上，后面的 JQ 对象都可以使用。