Question

我正在做这个输出，它已经像我想要的那样运行。这就像使用箭头键移动div一样，但我的问题是当我按箭头键移动时，灰色div颜色超过其自己的父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/

Answer 2

为什么不在jQuery上使用draggable？

Answer 3

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

您可以转到jsFiddle工作示例。

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

Answer 4

在你的按键回调中，你只需添加一些这样的逻辑：

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

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

我选择了offset所以x / y坐标是相对于文档的。

将div仅限制为其父级

4 个答案: