Jquery：防止可丢弃的项目丢弃在某些可删除的div之外

Question

我正在尝试在学习应用程序中实现drag and drop functionality。

这样做很好，将项目放到可放置区域就可以了。

// Adding drop function to each category
        jQuery.each(codes, function (index, value) {
            jQuery(value).droppable({
                drop: function (event, ui) {
                 //additional logic here
                }
            });
        });

但是，如果我拖动我的物品并将它们放在一个无法触及的区域，那么它也会留在那里。

帮助我将这些项目仅限于某些div，如果它们在这些区域之外，那么它应该回到原始位置

我做了一个样本小提琴：

Demo Fiddle

Answer 1

正如webeno在他的评论中所指出的那样，jQuery UI Droppable docs给出了如何将可拖动元素恢复到原始位置（如果没有放置在可放置区域上）的示例。我已经修改了你的小提琴，通过在draggable上添加一个选项，允许它在放置在无效（不可放置）区域时恢复位置：

$("#draggable").draggable({revert: "invalid"});。

jsFiddle