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

Unfortunately, jQuery UI Draggable doesn't expose any methods to manually change the element's position. You will have to track the #person's position manually when moving it with the keyboard, and stop moving it when it is about to exceed the bounds of the #map.

You can use jQuery methods such as .offset() and .position() methods to find reliable positions for elements.

For instance:

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