jQuery Draggable() and keyboard control

Question

Hey there, I have a page with the jQuery Draggable() enabled on #person and that #person is constrained to #map.

(link to plugin:

Answer 1

If someone feels a bit lazy, this is what I just coded (simplified):

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