jQuery Draggable() and keyboard control

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

(link to plugin: http://docs.jquery.com/UI/Draggables/draggable )

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 #map).

If I am dragging, then the #person gets constrained to the #map - if I use the arrow keys, the #person can go beyond the edge of #map.

How can I constrain the arrow keys as well as the draggable?

My code for the keyboard control:

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

                        });
                        break;
                            }
});

****phew**** cheers.

[EDIT] Please anyone? [/EDIT]