Làm cách nào để thực hiện div di chuyển bị hạn chế trong div bên ngoài?

Question

Vì vậy, tôi có một div bạn di chuyển với các phím mũi tên của bạn, nhưng làm thế nào để làm cho nó để nó không thể đi ra ngoài "div biên giới"?

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

Bạn thêm đơn giản nếu báo cáo để chắc chắn rằng bạn đã không được thông qua biên giới. Dưới đây là một ví dụ:

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

Bạn muốn thực hiện thay đổi tương tự sang bên trái và mũi tên đúng

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

Ở đây bạn đi: - Tôi đã thử nghiệm trong FF và Chrome và có vẻ là fine ....

Demo

Có lẽ điều này không hoàn toàn hoàn hảo nhưng bạn có thể xây dựng trên đó. Chìa khóa ở đây là để có được các lề của quyền cha mẹ và chắc chắn rằng trái/phải/trên/dưới của khối lập phương không vượt ra ngoài nó. Chiều rộng đường viền cũng nên được xem xét. Một điều nữa là Bước của bạn phải là bội số của chiều rộng/chiều cao (vì nó là hình vuông)

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