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

Question

所以我有一个你用箭头键移动的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/

Answer 1

您添加简单的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 2

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

Answer 3

在这里你去 - 我在FF和Chrome测试，似乎是精细....

Demo

也许这不完全完美，但你可以建立它。这里的关键是获得父母的权利，并确保立方体的左/右/上/下不超过它。边框宽度也应该被考虑。另一件事是你的第一步应该是它的宽度/高度的倍数（因为它是一个正方形）

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