拖出 html body/div/everything答案

【问题标题】：dragging out of html body/div/everything拖出 html body/div/everything
【发布时间】：2009-05-03 21:08:51
【问题描述】：

我让一类元素可以像这样拖动

jQuery(".drag").draggable();

jQuery(".drop").droppable({
accept: ".drag",

drop: function(ev, ui) {
//do stuff with dropped data

    }
});

现在的问题是，我可以将元素从正文中拖出，并拖到整个 html 中。如何限制可拖动的区域？

【问题讨论】：

【解决方案1】：

http://docs.jquery.com/UI/Draggable#option-containment

将拖动限制在指定元素或区域的范围内。可能的字符串值：'parent'、'document'、'window'、[x1, y1, x2, y2]。

例子：

使用指定的包含选项初始化可拖动对象。

$('.selector').draggable({ containment: 'parent' });

或者以防万一问题是可拖动的可以放置在所有地方：

如果设置为 true，则元素将在拖动停止时返回其起始位置。可能的字符串值：“有效”、“无效”。如果设置为无效，则仅当可拖动对象未放置在可放置对象上时才会发生还原。如果有效，则相反。

而且最后，我没有看到您设置可拖动的范围（编辑：但这不会解决您的问题，其他 2上面的东西应该）：

除了 droppable 的接受选项外，还用于对可拖动和可放置的项目集进行分组。与 droppable 具有相同范围值的可拖动对象将被 droppable 接受。

例子：

使用指定的范围选项初始化可拖动对象。

$('.selector').draggable({ scope: 'tasks' });

【讨论】：