jQuery Draggable() et le contrôle du clavier

Question

Hey là, j'ai une page avec le jQuery Draggable() activé sur #person et que #person est contraint à #map.

(lien vers plugin: http://docs.jquery.com/UI/Draggables/draggable)

Cependant, j'ai également ajouté le contrôle avec les touches fléchées du clavier. Maintenant, ils jouent tous bien ensemble jusqu'à ce que j'arrive au bord de la zone contrainte (le bord de #map).

Si je traîne, le #person obtient Limités à la #map - si j'utilise les touches fléchées, le #person peut aller au-delà du bord de #map.

Comment puis-je contraindre les touches fléchées ainsi que le draggable?

Mon code pour le contrôle du clavier:

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

         }); 
         break; 
          } 
}); 

**** **** ouf hourras.

[EDIT] S'il vous plaît quelqu'un? [/ EDIT]

Answer 1

Malheureusement, jQuery UI Draggable n'expose aucune méthode pour modifier manuellement la position de l'élément. Vous devrez suivre la position de la personne manuellement lorsque vous la déplacez avec le clavier, et arrêtez de la déplacer quand elle est sur le point de dépasser les limites du #map.

Vous pouvez utiliser les méthodes jQuery telles que .offset() et .position() pour trouver des positions fiables pour les éléments.

Par exemple:

$(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 quelqu'un se sent un peu paresseux, c'est ce que je viens Codé (simplifié):

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