嘿那里,我有一个页面,#person
启用了jQuery Draggable(),#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 ****欢呼。
[编辑]请有人吗? [/编辑]
答案 0 :(得分:9)
如果有人觉得有点懒,这就是我刚刚编写的(简化):
$('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();
}
答案 1 :(得分:8)
不幸的是,jQuery UI Draggable没有公开任何方法来手动更改元素的位置。使用键盘移动时,您必须手动跟踪#个人的位置,并在超过#map的范围时停止移动。
您可以使用.offset()和.position()方法等jQuery方法来查找元素的可靠位置。
例如:
$(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;
}
}
}
);