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

Question

标题可能有点混乱，我会解释。 我用jQuery（而不是jQuery UI的可拖动对象）制作了可拖动div。 这是代码：

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）中有一个box（div）并且它的大小为5x5，然后通过单击（0,0）到（10,10）来移动该box，则它的目的地应该是（10,10）。 但是，如果我通过将（2.5,2.5）拖动到（10,10）来移动框，则目的地必须是（12.5,12.5），而不是（10,10）。

但是在我的代码中，目标是（10,10），而不是（12.5,12.5），因为与点击点的偏移量未应用到翻译中。

如果您仍然不明白我的问题是什么，请参阅jquery-ui的可拖动示例 。 那就是我想做的。

我知道问题出在哪里，但是我尝试的所有方法都无法正常工作，因此在这里我几乎不需要帮助。 任何建议将不胜感激！

例子在这里 ！

Answer 1

只需将mousedown事件中的offsetX和offsetY值包括在您的计算中， pageY从mousemove处理程序中的pageX和pageY中减去它们pageX 。

 $(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>