2

我正在做这个输出，它已经像我想要的那样运行了。这就像div使用箭头键移动 a ，但我的问题是当我按箭头键移动时，颜色 graydiv超过其自己的 parent div。我想要实现的是，即使我不断按下箭头键，灰色div也无法走出其父级（有红色边框）。div

这是演示jsFiddle

有什么帮助吗？

4

4 回答 4

3

将您的代码更改为

$(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/

于 2012-10-04T15:09:52.977 回答
0

为什么不在jQuery上使用可拖动？

于 2012-10-04T15:05:09.847 回答
0

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

这是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;
    }
 });
});
于 2012-10-04T15:05:26.680 回答
0

在您的按键回调中，您只需添加一些如下逻辑：

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

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

我选择offset这样 x/y 坐标将相对于文档。

于 2012-10-04T15:06:59.120 回答