jQuery Draggable() và điều khiển bàn phím

Question

Xin chào, tôi có một trang có jQuery Draggable() được bật trên #person và rằng #person bị giới hạn ở #map.

(liên kết đến plugin: http://docs.jquery.com/UI/Draggables/draggable)

Tuy nhiên, tôi cũng đã thêm quyền kiểm soát với các phím mũi tên trên bàn phím. Bây giờ, tất cả chúng đều chơi tốt với nhau cho đến khi tôi đi đến rìa của khu vực bị ràng buộc (cạnh của #map).

Nếu tôi kéo, thì #person bị giới hạn ở #map - nếu tôi sử dụng các phím mũi tên, #person có thể vượt ra ngoài mép #map.

Làm thế nào tôi có thể hạn chế các phím mũi tên cũng như kéo?

Mã của tôi cho sự kiểm soát bàn phím:

$(document).bind('keydown',function(e){ //set the keydown function as... 
     switch(e.which) { 
      case 37: $(characterName).animate({ 
          left: '-=40' 
         }, 250, function() { 

         }); 
         break; 
          } 
}); 

**** phew **** cổ vũ.

[EDIT] Vui lòng bất cứ ai? [/ EDIT]

Answer 1

Thật không may, jQuery UI Draggable không hiển thị bất kỳ phương pháp nào để thay đổi vị trí của phần tử theo cách thủ công. Bạn sẽ phải theo dõi vị trí của người đó bằng tay khi di chuyển nó bằng bàn phím và ngừng di chuyển nó khi nó sắp vượt quá giới hạn của #map.

Bạn có thể sử dụng các phương pháp jQuery như các phương pháp .offset() và .position() để tìm vị trí đáng tin cậy cho các phần tử.

Ví dụ:

$(document).bind(
    'keydown', 
    function(event) { 

     switch(event.which) { 
      case 37: { 

       var character = $(characterName); 
       var map = $('#map'); 

       if((character.offset().left - 40) > map.offset().left) { 
        character.animate(
         { 
          left: '-=40' 
         }, 
         250, 
         function(){} 
        ); 
       } 

       break; 
      } 
     } 
    } 
); 

Answer 2

Nếu ai đó cảm thấy một chút lười biếng, đây là những gì tôi chỉ mã hóa (giản thể):

$('body').on('keypress', handleKeys); 

function handleKeys(e) { 
    var position, 
     draggable = $('#draggable'), 
     container = $('#container'), 
     distance = 1; // Distance in pixels the draggable should be moved 

    position = draggable.position(); 

    // Reposition if one of the directional keys is pressed 
    switch (e.keyCode) { 
     case 37: position.left -= distance; break; // Left 
     case 38: position.top -= distance; break; // Up 
     case 39: position.left += distance; break; // Right 
     case 40: position.top += distance; break; // Down 
     default: return true; // Exit and bubble 
    } 

    // Keep draggable within container 
    if (position.left >= 0 && position.top >= 0 && 
     position.left + draggable.width() <= container.width() && 
     position.top + draggable.height() <= container.height()) { 
     draggable.css(position); 
    } 

    // Don't scroll page 
    e.preventDefault(); 
}