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: 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]

on keydown, find the bounds of the #map, test to see if #person falls outside the area, if it does, break out otherwise, run the switch and your animation — wowo_999
– wowo_999, Commented Jul 19, 2010 at 18:10
NOOB QUESTION: How would I go about finding the bound's of #map? — Barrie Reader
– Barrie Reader, Commented Jul 20, 2010 at 7:51
You can see here : vfstech.com/?p=79 to get the bounding rectangle of an object through javascript — jasonpgignac
– jasonpgignac, Commented Jul 20, 2010 at 20:55

Blaise · Accepted Answer · 2013-01-13 09:44:33Z

11

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

edited Jan 13, 2013 at 9:44

answered Jan 11, 2012 at 12:52

Blaise

13.6k9 gold badges79 silver badges103 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

two7s_clash Over a year ago

arrow keys won't always register with keypress better to use keyup

cdata · Accepted Answer · 2010-07-22 03:36:55Z

8

+25

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

answered Jul 22, 2010 at 3:36

cdata

7991 gold badge6 silver badges16 bronze badges

3 Comments

Barrie Reader Over a year ago

Cheers, this is what I thought I wanted and this code is correct - please see my question entited: Setting bounds to a div, via keyboard control.

cdata Over a year ago

Sweet =] does that mean I get the bounty?

aditya_gaur Over a year ago

needed exactly the same behavior sad to know key board controls are not inbuilt into gradable.

Collectives™ on Stack Overflow

jQuery Draggable() and keyboard control

2 Answers 2

1 Comment

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related