Question

有人可以告诉我为什么这不起作用jsfiddle Code？

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中。

这是一个updated fiddle。

Answer 2

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

用箭头键jquery移动元素

2 个答案: