使用具有正確光標定位的Javascript移動元素

Question

如何在用光標正確定位元素的同時用鼠標移動元素？

像這個小提琴一樣，div總是跳到其0x0位置：

var isMouseDown = false;

$('div')
    .mousedown(function() {
    isMouseDown = true;
  })
  .mouseup(function() {
    isMouseDown = false;
  })
  .mousemove(function(event) {
    if(isMouseDown) {
        $(this).css({
        'top': event.pageY, // Offset missing
        'left': event.pageX
      });
    }
  });

https://jsfiddle.net/Lc844Lea/5/

Answer 1

將元素width的一半減到left ，將元素height的一半height top 。

var isMouseDown = false;
$('div').mousedown(function() {
    isMouseDown = true;
}).mouseup(function() {
    isMouseDown = false;
}).mousemove(function(event) {
    var heightWidth = this.getBoundingClientRect().height/2;
    if(isMouseDown) {
      $(this).css({'top': event.pageY - heightWidth,'left': event.pageX - heightWidth });
    }
});

DEMO