拖出html body/div/everything

Question

我让一个类的元素可以像这样拖拽

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

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

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

    }
});

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

Answer 1

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

将拖动限制在指定元素或区域的边界内。可能的字符串值：'parent'，'document'，'window'，x1，y1，x2，y2。

示例：

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

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

或，如果问题是可以将可拖动对象放在各处：

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

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

和最后，我没有看到你设置可拖动的(Edit：的作用域，但这不会解决你的问题，上面的其他两件事应该)

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

除了droppable的accept选项之外，还用于对可拖动和可拖放项的集合进行分组。droppable将接受与droppable具有相同作用域值的draggable。

示例：

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

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