jQuery的Draggable 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

就包括來自mousedown事件offsetX和offsetY值到你的計算，通過在mousemove處理器從pageX和pageY減去。

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