【问题标题】：Jquery : Prevent droppable Items to be Dropped outside certain droppable divsJquery：防止将可放置的项目放置在某些可放置的 div 之外
【发布时间】：2014-05-07 18:44:34
【问题描述】：

我正在尝试在学习应用程序中实现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

【问题讨论】：

你看过this post了吗...？
... 或者更好的是，jQuery UI Droppable 的this example 不是您正在寻找的...？

标签： jquery html jquery-ui drag-and-drop

【解决方案1】：

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

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

jsFiddle

【讨论】：