【问题标题】：jquery drag and drop revert optionsjquery拖放还原选项
【发布时间】：2013-10-16 18:35:20
【问题描述】：

在 html 中，我有一个名为 piles 的 10 个可拖动 divs 的列表和另一个名为 stacks 的 10 个可放置 divs 的列表。每个 pile 都将具有唯一的 id，该 id 将与 stack div 之一匹配。

如果 pile 不与 stack 匹配，则可拖动 div 应恢复到其默认位置。
如果堆确实与堆栈匹配，则可拖动的 div 将被放置在该堆栈中。

After the pile has matched the stack when i drag out the matched
*pile* from that stack it should automatically reposition to the exact list of *piles**

【问题讨论】：

堆与堆栈匹配，可拖动的 div 将放置在该堆栈内。

标签： jquery jquery-ui jquery-ui-draggable

【解决方案1】：

您可以在处理conditional revert（here、here 和 here）的这些 SO 问题上阅读更多相关信息，但这足以证明它自己的问题。

基本上你想在.draggable() 对象上将revert option 设置为'invalid'，如果它没有成功放置到可放置对象上，它会返回，如下所示：

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

然后，在您的.droppable() 中，您可以使用accept option 设置对丢弃有效的内容。 Accept 可以实现为一个函数，它根据是否接受元素返回true 或false。我们的 droppable 声明将如下所示：

$(".droppable").droppable({ 
    accept: function(drag) {
        var dropId = $(this).attr('data-id');
        var dragId = $(drag).attr('data-id');
        return dropId === dragId;
    }
});

在本例中，我使用数据属性来匹配拖放元素，但您可以随心所欲地进行操作。以下是一些示例 HTML：

<div class="draggable" data-id='a'>draggable a</div>
<div class="droppable" data-id='a'>droppable a</div>

这是一个严肃的演示：

jsFiddle

这是一个有趣的演示：

Fun Fruit Mix and Match Example

【讨论】：