javascript - 用箭头键 jquery 移动元素

Question

谁能告诉我为什么这不起作用jsfiddle 代码？

JavaScript：

$(document).ready(function() {
        $(document).live("keydown", KeyOperation);
});

function KeyOperation(e)
{
    alert("in");
    var top = $(".move").offset().top;
    var left = $(".move").offset().left;
    var IncrementBy = 10;

    if (e.which == 37) {
        $(".move").css({ left: left - 10 });
    }
    else if (e.which == 38) {
        $(".move").css({ top: top - IncrementBy });
    }
    else if (e.which == 39) {
        $(".move").css({ left: left + IncrementBy });
    }
    else if (e.which == 40) {
        $(".move").css({ top: top + IncrementBy });
    }
}​

HTML：

<div class="move"></div>​

CSS：

.move
{
    width: 100px;
    height:100px;
    border:1px solid red;
}​

Answer 1

假设问题是元素没有移动（你并没有真正在你的问题中明确问题），原因是元素没有正确定位。

添加position: absolute或添加position: relative到您的 CSS。

这是一个更新的小提琴。

Answer 2

您需要alert在代码中删除该函数，并将该.live函数替换为该.keydown函数。