我让一类元素像这样可拖动
jQuery(".drag").draggable();
jQuery(".drop").droppable({
accept: ".drag",
drop: function(ev, ui) {
//do stuff with dropped data
}
});
现在的问题是,我能够将元素从正文中拖出,并在整个 html 中。我如何限制可拖动的区域?
http://docs.jquery.com/UI/Draggable#option-containment
将拖动限制在指定元素或区域的范围内。可能的字符串值:'parent'、'document'、'window'、[x1, y1, x2, y2]。
例子:
使用指定的包含选项初始化可拖动对象。
$('.selector').draggable({ containment: 'parent' });
或者如果问题是可拖动的可以放置在所有地方:
http://docs.jquery.com/UI/Draggable#option-revert
如果设置为 true,则元素将在拖动停止时返回其起始位置。可能的字符串值:“有效”、“无效”。如果设置为无效,则仅当可拖动对象未放置在可放置对象上时才会发生还原。对于有效,它是相反的方式。
最后,我没有看到您设置可拖动的范围(编辑:但这不会解决您的问题,上面的其他两件事应该):
http://docs.jquery.com/UI/Draggable#option-scope
除了 droppable 的接受选项外,还用于对可拖动和可放置的项目集进行分组。与 droppable 具有相同范围值的可拖动对象将被 droppable 接受。
例子:
使用指定的范围选项初始化可拖动对象。
$('.selector').draggable({ scope: 'tasks' });