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

****phew**** cheers.

[编辑] 有人可以帮忙吗？[/编辑]

- Barrie Reader

---

在键盘按下事件中，查找 #map 的区域范围，测试 #person 是否超出该区域，若是，则跳出循环，否则运行切换和动画。 - wowo_999

新手问题：我该如何找到#map的边界？ - Barrie Reader

你可以在这里查看：http://www.vfstech.com/?p=79，通过JavaScript获取对象的边界矩形。 - jasonpgignac

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

- Blaise

---

箭头键不总是能够被 keypress 捕捉到，最好使用 keyup。 - two7s_clash

Answer 2

很不幸，jQuery UI Draggable没有暴露任何方法来手动更改元素的位置。当使用键盘移动它时，您将不得不手动跟踪#person的位置，并在它即将超出#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;
            }
        }
    }
);

- cdata

---

谢谢，这正是我所需的代码，它是正确的 - 请参阅我的问题标题：通过键盘控制设置div边界。 - Barrie Reader

那么，这意味着我能获得悬赏奖励了吗？ - cdata

很遗憾，键盘控制没有内置到Gradable中，所以需要实现完全相同的行为。 - aditya_gaur