Jak ograniczyć przenoszenie elementu div do elementu div?

Question

Więc mam div poruszasz się za pomocą klawiszy strzałek, ale jak mam to zrobić, aby nie mógł wyjść poza "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

dodać prosty if, aby upewnić się, że nie przeszły granicę. Oto przykład:

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

Byłbyś podobnych zmian po lewej i prawej strzałki

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

tutaj przejść: - I badane w FF i Chrome i wydaje się być porządku ....

Demo

Prawdopodobnie nie jest to całkowicie idealne, ale można na nim budować. Kluczem jest tutaj uzyskanie marginesów prawa rodzica i upewnienie się, że sześcian w lewo/prawo/góra/dół nie wykracza poza nie. Należy również uwzględnić szerokość obramowania. Inną rzeczą jest twój krok powinien być wielokrotnością jej szerokość/wysokość (jak to jest kwadrat)

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