如何使用javascript/jquery将div保存在容器框架内

我有一个简单的（我想）问题

我有一个Conataner 800x400，里面是一个div 10x10。 里面的div通过按箭头键移动，但我喜欢做的是 将div保持在容器框架内

$（文档）.ready（函数（）{
go_kw（）；
});
函数go_kw（）{
移动我（）；
}
函数move_me（）{
$（文档）.on（'keydown'，函数（事件）{
让key=event.which；
设qt=$（'#qw'）；
如果（键==37）{
qt.css（'left'，'-=1'）；
}否则如果（键==38）{
qt.css（'top'，'-=1'）；
}否则如果（键==39）{
css（'left'，'+=1'）；
}否则，如果（键==40）{
css（'top'，'+=1'）；
}
});
}

#容器{
位置：相对位置；
边框：1px实心#000000；
宽度：800px；
高度：400px；
保证金：50px自动；
}
#量子阱{
位置：绝对位置；
宽度：10px；
高度：10px；
排名：0；
左：0；
背景色：#ff0000；
}

JS-Bin

您可以使用Math.max（选择两个参数中的最大值）和Math.min（选择相反的值），就像这样（用于水平移动）：

---

在移动

parseInt（qt.css（'left'））>0之前，您需要检查自己是否没有越过div边界

片段：


$（文档）.ready（函数（）{
go_kw（）；
});
函数go_kw（）{
移动我（）；
}
函数move_me（）{
$（文档）.on（'keydown'，函数（事件）{
让key=event.which；
设qt=$（'#qw'）；
if（key==37&&parseInt（qt.css（'left'））>0）{
qt.css（'left'，'-=1'）；
}如果（key==38&&parseInt（qt.css（'top'））>0，则为else{
qt.css（'top'，'-=1'）；
}else if（key==39&&parseInt（qt.css（'left'））<790）{
css（'left'，'+=1'）；
}else if（key==40&&parseInt（qt.css（'top'））<390）{
css（'top'，'+=1'）；
}
});
}
#容器{
位置：相对位置；
边框：1px实心#000000；
宽度：800px；
高度：400px；
保证金：50px自动；
}
#量子阱{
位置：绝对位置；
宽度：10px；
高度：10px；
排名：0；
左：0；
背景色：#ff0000；
}

JS-Bin
最简单的方法应该是测试您的位置在左侧和顶部是否优于0，在右侧和底部是否低于
#容器
宽度和高度


$（文档）.ready（函数（）{
go_kw（）；
});
函数go_kw（）{
移动我（）；
}
函数move_me（）{
$（文档）.on（'keydown'，函数（事件）{
让key=event.which；
设qt=$（'#qw'）；
设maxHeight=$（“#容器”）.height（）；
设maxWidth=$（“#容器”）.width（）；
如果（键==37&&qt.position（）.left>0）{
qt.css（'left'，'-=1'）；
}否则如果（键==38&&qt.position（）.top>0）{
qt.css（'top'，'-=1'）；
}else if（键==39&&qt.position（）.left

#容器{
位置：相对位置；
边框：1px实心#000000；
宽度：800px；
高度：400px；
保证金：50px自动；
}
#量子阱{
位置：绝对位置；
宽度：10px；
高度：10px；
排名：0；
左：0；
背景色：#ff0000；
}

JS-Bin
我会创建一个带有left和top值的字段，并在这样的更改过程中检查它（我已经将容器缩小以便于测试，可以在css中放大）：


$（文档）.ready（函数（）{
go_kw（）；
});
函数go_kw（）{
移动我（）；
}
var qwWidth=$（'#qw'）.width（）；
var qwHeight=$（'#qw'）.height（）；
var maxLeft=$（'#container'）.width（）-qwWidth；
var maxTop=$（“#容器”）.height（）-qwHeight；
var currentPos={
左:0,，
排名：0
};
函数move_me（）{
$（文档）.on（'keydown'，函数（事件）{
让key=event.which；
如果（键==37）{
changePos（'left'，-1，maxLeft）；
}否则如果（键==38）{
changePos（'top'，-1，maxTop）；
}否则如果（键==39）{
changePos（'left'，1，maxleet）；
}否则，如果（键==40）{
changePos（'top'，1，maxTop）；
}
$（'#qw'）.css（currentPos）；
});
}
函数changePos（prop、changeVal、maxVal）{
var newVal=当前位置[prop]+changeVal；
if（newVal<0）{
currentPos[prop]=0；
}else if（newVal>maxVal）{
currentPos[prop]=maxVal；
}否则{
currentPos[prop]=newVal；
}
}
#容器{
位置：相对位置；
边框：1px实心#000000；
宽度：80px；
高度：40px；
保证金：50px自动；
}
#量子阱{
位置：绝对位置；
宽度：10px；
高度：10px；
排名：0；
左：0；
背景色：#ff0000；
}

JS-Bin
您自己是否尝试过实现这一点？看到一些尝试总是好的，即使它们不起作用！是的，我尝试了我正在学习javascript，我的问题是我理解我想做的事情的逻辑，但是在翻译代码时遇到了问题：D我也很好奇有什么可能，谢谢回答：D谢谢大家！
if(key == 37){
    qt.css('left', Math.max(qt.css('left') - 1, 0));
}
else if(key == 39){
    qt.css('left', Math.min(qt.css('left') + 1, 800));
}