title: jQuery Draggable() and keyboard control
body: <p>Hey there, I have a page with the jQuery Draggable() enabled on <code>#person</code> and that <code>#person</code> is constrained to <code>#map</code>.</p>
  
  <p>(link to plugin: <a href="http://docs.jquery.com/UI/Draggables/draggable" rel="noreferrer">http://docs.jquery.com/UI/Draggables/draggable</a> )</p>
  
  <p>However, I have also added control with the Arrow keys on the keyboard. Now, they all play well together until I get to the edge of the constrained area (the edge of <code>#map</code>). </p>
  
  <p>If I am dragging, then the <code>#person</code> gets constrained to the <code>#map</code> - if I use the arrow keys, the <code>#person</code> can go beyond the edge of <code>#map</code>.</p>
  
  <p>How can I constrain the arrow keys as well as the draggable?</p>
  
  <p>My code for the keyboard control:</p>
  
  <pre><code>$(document).bind('keydown',function(e){ //set the keydown function as...
          switch(e.which) {
              case 37:    $(characterName).animate({
                              left:   '-=40'
                          }, 250, function() {
  
                          });
                          break;
                              }
  });
  </code></pre>
  
  <p>****phew**** cheers.</p>
  
  <p>[EDIT] Please anyone? [/EDIT]</p>