Question

所以我用你的箭头键移动了一个div，但我怎么做它所以它不能超出“border div”？

$(document).ready(function(){
  $(document).keydown(function(e) {
      switch (e.which) {
      case 37: // Left
        $("#cube").css("left", $("#cube").offset().left - 101);
        break;
      case 38: // Up
        $("#cube").css("top", $("#cube").offset().top - 11);
        break;
      case 39: // Right
        $("#cube").css("left", $("#cube").offset().left - 97);
        break;
      case 40: // Down
        $("#cube").css("top", $("#cube").offset().top - 7);
        break;
      }
  });
});

http://jsfiddle.net/SfKHN/

Answer 1

你走了： - 我在FF和Chrome上测试过，看起来很好......

<强> Demo

可能这不完全是完美的，但你可以建立它。这里的关键是获得右边距的边距，并确保立方体的左/右/上/下不超出它。边界宽度也应该考虑。另一件事是你的Step应该是它的宽度/高度的倍数（因为它是一个正方形）

$(document).ready(function(){
    $(document).keydown(function(e) {
        var cube = $("#cube");
        var leftMargin = 0;
        var rightMargin = $('#outside').position().left + $('#outside').width() - cube.width();
        var topMargin =0;
        var bottomMargin = $('#outside').position().top + $('#outside').height() - cube.height();
        switch (e.which) {
        case 37: // Left
                var newLeft = parseInt(cube.position().left - 50);
               if(leftMargin <= newLeft)
                {
                    cube.css("left", newLeft);
                }
            break;
        case 38: // Up
                var newTop = parseInt(cube.position().top - 50);
                if(topMargin <= newTop)
                {
                    cube.css("top",newTop);
                }
            break;
        case 39: // Right
                var newRight = (cube.position().left + 50);
                 if(rightMargin > newRight)
                {
                    cube.css("left", newRight);
                }
            break;
        case 40: // Down
                var newBottom = parseInt(cube.position().top + 50);
                if(bottomMargin > newBottom)
                {
                    cube.css("top", newBottom);
                }
            break;
        }
    });
});

Answer 2

添加简单的if语句以确保没有通过边框。这是一个例子：

$(document).ready(function(){
    $(document).keydown(function(e) {
        switch (e.which) {

            case 38: // Up
                if( ( $("#cube").offset().top - 11 ) >= 0 )
                    $("#cube").css("top", $("#cube").offset().top - 11);
                break;

            case 40: // Down
                if( ( $( "#cube" ).offset( ).top - 7 ) < ( 400 - 50 ) )
                    $("#cube").css("top", $("#cube").offset().top - 7 );
                break;
        }
    });
});

您对左右箭头进行了类似的更改

Answer 3

$(document).ready(function () {
    var $out  = $('#outside'),
        w     = $out.width(),
        $cube = $('#cube'),
        cw    = $cube.outerWidth();

    $(document).up(function (e) {
        switch (e.which) {
            case 37:
                $cube.css('left', function (_, left) {
                    left = parseInt(left, 10);
                    if (left !== 0) return left - cw;
                });
                break;
            case 38:
                $cube.css('top', function (_, top) {
                    top = parseInt(top, 10);
                    if (top !== -1) return top - cw;
                });
                break;
            case 39:
                $cube.css('left', function (_, left) {
                    left = parseInt(left, 10);
                    if (left + cw < w) return left + cw;
                });
                break;
            case 40:
                $cube.css('top', function (_, top) {
                    top = parseInt(top, 10);
                    if (top !== 349) return top + cw;
                });
                break;
        }
    });
});

http://jsfiddle.net/QmBNC/

如何在外部div中限制移动div？

3 个答案: