如何在外部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; 
     } 
    }); 
});