单击以将div移动到鼠标坐标

Question

我有以下代码：
http://www.project-vanquish.co.cc/gridtest/drag-grid.html

计划是允许用户以3种方式控制该div（带笑脸）：
1 - 通过键盘上的光标键
2 - 通过拖动div 3 - 通过单击某个区域，div将移动到该位置

我遇到的问题是，当我点击页面时，div似乎会略微偏移到它应该是什么：（

此外，“点击移动”方法在IE中根本不起作用。

我以为我昨晚破了这个，显然不是......

Answer 1

您需要调整 mouse coordinates，因为它们是absolute（来自事件对象），但您可以在地图上使用relative。< / p>

因此，每次点击发生时，您需要地图的坐标，并从鼠标点击坐标中减去。

您还需要规范化点击坐标以处理角色的中心（而不是左上角）。因此，您需要从鼠标坐标中减去字符的宽度和高度的一半。

[See it in action]

var mapTop     = $('#map').offset().top;
var mapLeft    = $('#map').offset().left;
var charWidth  = $('#character').outerWidth();
var charHeight = $('#character').outerHeight();

$('#map').click(function (e) {
    var mouseX = e.pageX - mapLeft - (charWidth / 2);  // convert absolute coords
    var mouseY = e.pageY - mapTop  - (charHeight / 2); // into relative ones...
    mouseX = Math.round(mouseX / 40) * 40;
    mouseY = Math.round(mouseY / 40) * 40;
    $('#character').animate({
        top: mouseY,
        left: mouseX
    })
});

Answer 2

要解决点击方法中的偏移问题，请尝试调整顶部和左侧动画属性以补偿您已应用于#character div的内联样式（顶部：200px;左：120px;）。 e.g：

而不是：

$('#character').animate({
    top:    mouseY,
    left:   mouseX
})

试试这个：

$('#character').animate({
    top:    mouseY - 200,
    left:   mouseX - 120
})

要在IE中使用它，请尝试在animate方法的末尾添加分号：

$('#character').animate({
    top:    mouseY - 200,
    left:   mouseX - 120
});

（两种解决方案都未经测试。）

Answer 3

如果有一些offSet，那么你应该抓住它并添加它（作为保证金）。为此，请使用firebug并读取DOM（offSetX和offSetY）。使用jQuery获取相应的offSet并将其添加到Margin（Top或Left）。

前几天我情况类似，如果你没有找到出路，请告诉我。 NickD提出的解决方案可能会解决问题，但由于offSet可以从浏览器更改为其他，或者在对设计进行改进时，自动解决方案值得付出努力。