如何使 object 向鼠标 position 移动？

Question

当用左指针单击区域时，我试图使 object 在该区域中移动。

• 这在 javascript/jquery 中可能吗？
• 如果可能的话，你能给我一些例子吗？
• 我的目标是在 javascript/html/css 中做到这一点

这是鼠标单击后的 object 的示例

Answer 1

您可以这样做（ jsFiddle 中的工作演示）：

$(document).ready(function(){
    $('#canvas').click(function(e){
        var offset = $(this).offset();
        $('#object').css({
            'top': e.pageY-offset.top,
            'left': e.pageX-offset.left
        })
    })
})

每当发生点击事件时，都会pageX和pageY值，使用这些值可以找到 canvas object 中点击的确切位置。 然后在 jQuery animate function 中使用此坐标来更改其中 object div 的位置。

Answer 2

这是可能的，但您的答案可能包括通过在 CSS 中将其 position 设置为绝对并修改其左侧和顶部 position 直到它到达带有 setInterval 计时器的点击区域以详细说明 A* 路径查找，从而将 object 移动到点击 position。

Answer 3

var mousePosition;
var div;
div = document.createElement("div");
div.style.position = "absolute";
div.style.left = "0px";
div.style.top = "0px";
div.style.width = "100px";
div.style.height = "100px";
div.style.backgroundColor = "red";
document.body.appendChild(div);

document.addEventListener('click', function(event) {
        mousePosition = {
            x : event.clientX,
            y : event.clientY
        };
        div.style.left = (mousePosition.x-div.offsetWidth/2) + 'px';
        div.style.top  = (mousePosition.y-div.offsetHeight/2) + 'px';
}, true);