使用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>