Question

我制作了一类像这样可拖动的元素

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

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

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

    }
});

现在的问题是，我能够将元素拖出体外，并且遍布html。我如何限制可拖动的区域？

Answer 1

约束拖动到指定元素或区域的范围内。可能的字符串值：'parent'，'document'，'window'，[x1，y1，x2，y2]。

示例：

使用指定的包含选项初始化一个draggable。

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

或如果问题是可以将draggable放在所有地方：

如果设置为true，则拖动停止时元素将返回其起始位置。可能的字符串值：'valid'，'invalid'。如果设置为无效，则只有在拖放器上没有删除拖动时才会进行恢复。如果有效，那就是另一种方式。

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

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

示例：

使用指定的范围选项初始化一个draggable。

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