如何使移动的 div 限制在外部 div 中？答案

【问题标题】：How to make a moving div restricted in an outside div?如何使移动的 div 限制在外部 div 中？
【发布时间】：2013-05-05 01:27:44
【问题描述】：

所以我有一个你用箭头键移动的 div，但是我如何使它不能超出“边界 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/

【问题讨论】：

如果你使用全局代码，你的代码会更干净，运行速度也会更快：var $cube = $("#cube");
@user2291675 我已经为您的问题添加了解决方案，看看？

标签： javascript jquery html keydown key-events

【解决方案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;
        }
    });
});

【讨论】：

【解决方案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;
        }
    });
});

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

【讨论】：

【解决方案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/

【讨论】：