我想使用 jQuery 用箭头键移动 div。 所以右、左、下、上。

找到了我想要完成的演示here http://atomicrobotdesign.com/blog/htmlcss/move-objects-around-the-canvas-using-the-keyboard-and-jquery/

我希望能够在另一个 div 中移动一个 div。

如何才能做到这一点？

var pane = $('#pane'),
    box = $('#box'),
    w = pane.width() - box.width(),
    d = {},
    x = 3;

function newv(v,a,b) {
    var n = parseInt(v, 10) - (d[a] ? x : 0) + (d[b] ? x : 0);
    return n < 0 ? 0 : n > w ? w : n;
}

$(window).keydown(function(e) { d[e.which] = true; });
$(window).keyup(function(e) { d[e.which] = false; });

setInterval(function() {
    box.css({
        left: function(i,v) { return newv(v, 37, 39); },
        top: function(i,v) { return newv(v, 38, 40); }
    });
}, 20);

#pane {
  position: relative;
  width: 300px;
  height: 300px;
  border: 2px solid red;
}

#box {
  position: absolute;
  top: 140px;
  left: 140px;
  width: 20px;
  height: 20px;
  background-color: black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="pane">
  <div id="box"></div>
</div>

变量解释：
w- 框可以具有的最大左/上值（保持在边界内）
x- 盒子在每个间隔内移动的距离（以 px 为单位）
d- 该对象存储有关按下哪个键的信息。例如，当用户按住左箭头键时，d['37'] is true。否则就是false. BTW, 37是左箭头键的键码，该值存储在e.which事件对象的属性。这d每个对象都在更新keydown and keyup event.

每 20 毫秒执行一次的 setInterval 会更新 box 元素的 left 和 top CSS 属性。新值通过以下方式计算newv功能。

The newv函数将根据 a) 旧值计算新的左/上值v和 b)d object.

表达方式n < 0 ? 0 : n > w ? w : n确保新值在允许的范围内（即0 to w）。如果 n w，则返回 w。

现场演示：http://jsfiddle.net/simvidas/bDMnX/1299/ http://jsfiddle.net/simevidas/bDMnX/1299/

Update:此代码与上面的原始代码具有相同的功能。唯一的区别是我为变量和参数使用了更有意义的名称。正如您所看到的，它看起来很糟糕 - 原始版本显然更好。:P

var pane = $('#pane'),
    box = $('#box'),
    maxValue = pane.width() - box.width(),
    keysPressed = {},
    distancePerIteration = 3;

function calculateNewValue(oldValue, keyCode1, keyCode2) {
    var newValue = parseInt(oldValue, 10)
                   - (keysPressed[keyCode1] ? distancePerIteration : 0)
                   + (keysPressed[keyCode2] ? distancePerIteration : 0);
    return newValue < 0 ? 0 : newValue > maxValue ? maxValue : newValue;
}

$(window).keydown(function(event) { keysPressed[event.which] = true; });
$(window).keyup(function(event) { keysPressed[event.which] = false; });

setInterval(function() {
    box.css({
        left: function(index ,oldValue) {
            return calculateNewValue(oldValue, 37, 39);
        },
        top: function(index, oldValue) {
            return calculateNewValue(oldValue, 38, 40);
        }
    });
}, 20);