Moving element with arrow keys jquery
<p>Can anybody tell me why this is not working <a href="http://jsfiddle.net/kuEA7/3/" rel="nofollow">jsfiddle Code</a>?</p>

<p>JavaScript:</p>

<pre><code>$(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 });
    }
}​
</code></pre>

<p>HTML:</p>

<pre><code>&lt;div class="move"&gt;&lt;/div&gt;​
</code></pre>

<p>CSS:</p>

<pre><code>.move
{
    width: 100px;
    height:100px;
    border:1px solid red;
}​
</code></pre>
