jquery - 拖出 html body/div/everything

Question

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

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

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

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

    }
});

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

score 4 · Accepted Answer

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

例子：

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

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

或者如果问题是可拖动的可以放置在所有地方：

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

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

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

例子：

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

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

1 回答 1