javascript - 如何将元素移动到用户点击的位置？

Question

我正在制作游戏，我想将一个元素(实际上是 Angular 色)移动到我在页面上单击的任何位置。 (实际上是鼠标按下)

我相信使用脚本可以在鼠标按下时更改元素的位置，但我不知道该怎么做。

我需要一个简单的工作示例，然后我会弄清楚如何使它适应我的网站，但我一直没能找到一个。

我尝试了一些简单的移动，并找到了关于如何使用键盘移动它的教程，但这不是我想要的，也找不到如何使用鼠标移动它。

我正在这里测试它，虽然我正在快速修改代码，但大多数时候没有任何效果: http://chusmix.com/game/movechar.php

一些建议、代码、任何链接都将受到欢迎。谢谢

Answer 1

给你:

HTML:

<div id="area">
    <img src="http://placekitten.com/80/80" id="character">
</div>

JavaScript:

var area = $('#area')[0];
    character = $('#character')[0];

$(area).click(function(e) {
    if ( e.target !== this ) { return; }
    var charWidth = $(character).width(),
        max = $(this).width() - charWidth,
        x = e.offsetX - charWidth/2,
        y = e.offsetY - charWidth/2;
    $(character).css({
        left: x < 0 ? 0 : x > max ? max : x,
        top: y < 0 ? 0 : y > max ? max : y
    });  
});

现场演示: http://jsfiddle.net/WUjKM/2/show/

顺便说一句，我知道它是 jQuery :/。如果您需要非 jQuery 解决方案，请告诉我，我会重写它。