Jquery 仅将div限制为其自己的父级

我正在做这个输出，它已经像我想要的那样运行了。这就像使用箭头键移动

div

，但我的问题是，当我按箭头键移动时，灰色

div

超过了它自己的父

div

。我想要实现的是，灰色的

div

将无法跳出其父

div

（具有红色边框），即使我连续按箭头键

这是演示

---

有什么帮助吗？

为什么不在jQuery上使用？

您可以获取容器的位置，并检查灰框的位置是否超过它

下面是工作示例

$(function(){
var spaceship = '<div id="spaceshipContainer"></div>';
$('#centerSpace').append(spaceship);
var parent_position = $('#centerSpace').position();
var parent_right = parent_position.left + $('#centerSpace').width() -$('#spaceshipContainer').width();
var parent_buttom= parent_position.top + $('#centerSpace').height()-$('#spaceshipContainer').height();
$(document).keypress(function(e){

    var position = $('#spaceshipContainer').position();

    switch(e.keyCode){

        case 37:

            if( position.left - 10 >= parent_position.left)
                $('#spaceshipContainer').css('left', position.left - 10 + 'px');
            break;
        case 38:
            if( position.top - 10 >= parent_position.top)
            $('#spaceshipContainer').css('top', position.top - 10 + 'px');
            break;
        case 39:
            if( position.left  <= parent_right)
            $('#spaceshipContainer').css('left', position.left + 10 + 'px');
            break;
        case 40:
            if( position.top<= parent_buttom)
            $('#spaceshipContainer').css('top', position.top + 10 + 'px');
            break;
    }
 });
});

$（函数（）{
var太空船=''；
$（'#centerSpace'）。追加（太空船）；
var parent_position=$（“#中心空间”）.position（）；
var parent_right=parent_position.left+$（'#centerSpace'）.width（）-$（'#spaceshipContainer'）.width（）；
var parent_buttom=parent_position.top+$（“#中心空间”）.height（）-$（“#太空船容器”）.height（）；
$（文档）。按键（功能（e）{
var position=$（“#spaceshipContainer”）.position（）；
开关（如钥匙代码）{
案例37：
if（position.left-10>=父位置左）
$（'#spaceshipContainer'）.css（'left'，position.left-10+'px'）；
打破
案例38：
如果（position.top-10>=父位置.top）
$（'#spaceshipContainer'）.css（'top'，position.top-10+'px'）；
打破
案例39：
如果（position.left在您的按键回调上，您只需添加如下逻辑：

var $ship = $('#spaceshipContainer');

if ($ship.offset().top < $ship.parent().offset().top) {
    return false;
}
// repeat for left, right, bottom

var$ship=$（“#spaceshipContainer”）；
如果（$ship.offset（）.top<$ship.parent（）.offset（）.top）{
返回false；
}
//重复左、右、下三个步骤

我选择了偏移量，因此x/y坐标将相对于文档。
将代码更改为

$(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});
    });
});

$（函数（）{
var spaceship=$（''）；//存储对实际jQuery对象的引用
var cS=$（“#中心空间”）.append（太空船）；
var limits={width:cS.width（）-spaceship.width（），height:cS.height（）-spaceship.height（）}；//预先计算限制
$（文档）。按键（功能（e）{
var position=$（“#spaceshipContainer”）.position（）；
开关（如钥匙代码）{
案例37：
位置左-=10；
打破
案例38：
位置.top-=10；
打破
案例39：
位置左+=10；
打破
案例40：
位置。顶部+=10；
打破
}
position.left=Math.max（Math.min（position.left，limits.width），0）；//强制执行水平限制
position.top=Math.max（Math.min（position.top，limits.height），0）；//强制执行垂直限制
css（{left:position.left，top:position.top}）；
});
});

还将
位置：相对
添加到
#中心空间

在jsFiddle中的
演示我没有看到任何灰色div。你能检查一下吗？我想你需要从左侧更改框架并使其成为jQuery？我为我的错误感到抱歉。我想要的是使用箭头键移动div，而不是拖动它。