jQuery Draggable() y control de teclado

Question

Oye, tengo una página con jQuery Draggable() habilitada en #person y #person está restringida a #map.

(enlace al plugin: http://docs.jquery.com/UI/Draggables/draggable)

Sin embargo, también he añadido de control con las teclas de dirección del teclado. Ahora, todos juegan bien juntos hasta que llegue hasta el borde de la zona restringida (el borde de #map).

Si estoy arrastrando, entonces el #person consigue constreñidos a la #map - si uso las teclas de flecha, el #person puede ir más allá del borde de #map.

¿Cómo puedo restringir las teclas de dirección, así como la que pueden arrastrarse?

Mi código para el control del teclado:

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

         }); 
         break; 
          } 
}); 

**** **** phew aplausos.

[EDIT] Por favor, cualquier persona? [/ EDIT]

Answer 1

Desafortunadamente, jQuery UI Arrastrable no exponer ningún método para cambiar manualmente la posición del elemento. Tendrá que seguir la posición de la persona # manualmente cuando la mueve con el teclado, y dejar de moverla cuando esté a punto de sobrepasar los límites del # mapa.

Puede utilizar métodos jQuery como .offset() y .position() para encontrar posiciones fiables para los elementos.

Por ejemplo:

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

Si alguien se siente un poco perezoso, esto es lo que acabo codificada (simplificado):

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