jQuery Draggable () и управление с клавиатуры

Question

Привет, у меня есть страница с включенной jQuery Draggable () на #person, а #person ограничено #map.

(ссылка на плагин: http://docs.jquery.com/UI/Draggables/draggable)

Однако я также добавил управление клавишами со стрелками на клавиатуре. Теперь они все хорошо играют вместе, пока я не доберусь до края ограниченной области (края #map).

Если я перетаскиваю, #person ограничивается #map - если я использую клавиши со стрелками, #person может выйти за пределы #map.

Как я могу ограничить клавиши со стрелками и перетаскивание?

Мой код для управления с клавиатуры:

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

                        });
                        break;
                            }
});

**** фу **** ура.

[EDIT] Пожалуйста, кто-нибудь? [/ EDIT] * * тысячу двадцать-шесть

Answer 1

Если кто-то чувствует себя немного ленивым, это то, что я только что написал (упрощенно):

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

Answer 2

К сожалению, jQuery UI Draggable не предоставляет никаких методов для ручного изменения позиции элемента. При перемещении с помощью клавиатуры вам нужно будет вручную отследить положение # человека и прекратить его перемещение, когда он превысит границы #map.

Вы можете использовать методы jQuery, такие как .offset () и .position () , чтобы найти надежные позиции для элементов.

Например:

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