移動divを外部divに制限する方法を教えてください。

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

文はあなたが境界線を通過していないことを確認する場合は、簡単な追加。ここでは例です：

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