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>