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

Question

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

计划是允许用户以 3 种方式控制该 div(带有笑脸):
1 - 通过键盘上的光标键
2 - 通过拖动 div
3 - 通过点击一个区域，div 将移动到该位置

我遇到的问题是，当我点击页面时，div 似乎稍微偏移了它应该是的 :(

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

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

Answer 1

您需要调整鼠标坐标，因为它们是绝对(来自事件对象)，但您必须使用 map 上的相对。

因此您需要 map 的坐标，并在每次点击时从鼠标点击坐标中减去它们。

您还必须标准化点击坐标以处理 Angular 色的中心(而不是左上角)。因此，您需要从鼠标坐标中减去字符宽度和高度的一半。

[ 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
    })
});