javascript - 使用 jQuery 的可拖动 div，如何应用元素的单击偏移量？

Question

标题可能有点困惑，我会解释一下。我用 jQuery 创建了一个可拖动的 div(不是 jQuery UI 的可拖动)。这是代码:

let target = null;

this.el.on('mousedown', (ev) => {
    target = this.el;
}).on('mouseup', (ev) => {
    target = null;
});

$(document.body).on('mousemove', 'div', (ev) => {
    if(target) {
        this.x = ev.pageX;
        this.y = ev.pageY;

        this.update(); // update css
    }
});

代码非常简单，而且运行良好。问题是，当我从中心或任何地方(而不是左上角)拖动时，元素始终遵循光标的协调，因此元素的左上角始终放置在我拖动的位置。是的，这是正确的，因为这就是我所做的，但我想从拖动的位置移动元素。

这很难解释，所以我会给出更简单的解释。如果(0,0)中有一个盒子(div)并且它的大小为5x5，并且通过单击(0,0)将盒子移动到(10,10)，则它的目的地应该是(10,10)。但是，如果我通过将 (2.5,2.5) 拖动到 (10,10) 来移动该框，则目标必须是 (12.5,12.5)，而不是 (10,10)。

但在我的代码中，目标是 (10,10)，而不是 (12.5,12.5)，因为从点击点的偏移量不会应用于翻译。

如果您还是不明白我的问题是什么，请参阅jquery-ui's draggable example 。这正是我想要做的。

我知道问题是什么，但我所有的尝试都不起作用，所以我在这里需要很少的帮助。任何建议将不胜感激!

示例为here !

Answer 1

只需包含 offsetX和offsetY来自 mousedown 的值事件进入您的计算，通过从 pageX 中减去它和pageY在 mousemove处理程序。

$(document).ready(function() {
  function DraggableElement() {
    this.x = 0;
    this.y = 0;
    this.width = 100;
    this.height = 100;

    this.el = $('<div></div>')
    .addClass('box')
    .appendTo($('#playground'));

    this.update();

    var self = this;
    var target = null;
    var offsetX = 0;
    var offsetY = 0;

    this.el.on('mousedown', function(ev) {
      offsetX = ev.offsetX;
      offsetY = ev.offsetY;
      target = self.el;
    }).on('mouseup', function() {
      target = null;
    });

    $(document.body).on('mousemove', 'div', function(ev) {
      if(target) {
        self.x = ev.pageX - offsetX;
        self.y = ev.pageY - offsetY;
        self.update();
      }
    });
  }
  DraggableElement.prototype.update = function() {
    this.el.css({
      top: this.y + 'px',
      left: this.x + 'px',
      width: this.width + 'px',
      height: this.height + 'px'
    })
  };

  var el = new DraggableElement();
});

* {
  padding: 0;
  margin: 0;
}
#playground {
  background-color: #eee;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.box {
  position: absolute;
  background-color: red;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="playground"></div>