jquery - 将 div 限制为仅适用于其父级

Question

我正在执行此输出，它已经按照我想要的方式运行了。这就像移动 div使用箭头键，但我的问题是当我按箭头键移动时，颜色为灰色div超越自己的 parent div 。我想要实现的是灰色div将无法走出其父级 div (有红色边框)，即使我不断地按箭头键。

这是演示 jsFiddle

有什么帮助吗？

Answer 1

将代码更改为

$(function(){
    var spaceship = $('<div id="spaceshipContainer"/>'); // store reference to actual jQuery object
    var cS = $('#centerSpace').append(spaceship);
    var limits = {width: cS.width()-spaceship.width() , height:cS.height()-spaceship.height()}; // pre-calculate the limits

    $(document).keypress(function(e){
        var position = $('#spaceshipContainer').position();


        switch(e.keyCode){

            case 37:
                position.left -= 10;
                break;
            case 38:
                position.top -= 10;
                break;
            case 39:
                position.left += 10;
                break;
            case 40:
                position.top += 10;
                break;
        }

        position.left = Math.max(Math.min(position.left, limits.width),0); // enforce horizontal limits
        position.top = Math.max(Math.min(position.top, limits.height),0); // enforce vertical limits

        spaceship.css({left:position.left, top:position.top});
    });
});

还将 position:relative 添加到 #centerSpace

演示位于 http://jsfiddle.net/4bpgp/17/