jQuery : Prevent droppable Items to be Dropped outside certain droppable divs

Question

我正在尝试在学习应用程序中实现拖放功能。

这很有效，将项目拖放到可放置区域就可以正常工作。

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

但是，如果我拖动我的项目并将它们留在不可放置的区域，那么它也会保留在那里。

帮助我使项目只能放置到某些div，如果它们在这些区域之外，那么它应该返回到原始位置

我制作了一个样本 fiddle :

Demo Fiddle

Answer 1

正如 webeno 在他的评论中指出的那样，jQuery UI Droppable docs举例说明如果未放置在可放置区域上，如何使可拖动元素恢复到其原始位置。我通过将选项添加到可拖动项来修改您的 fiddle ，该选项允许其在放置在无效(不可放置)区域时恢复位置:

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

jsFiddle