jquery拖放还原选项

Question

在html中，我有一个名为 piles 的10个可拖动div的列表，以及另一个名为 stacks 的10个可放置div的列表。每个桩都将具有唯一的ID，该ID将与 stack div中的一个匹配。

• 如果桩 不与堆栈匹配，则可拖动的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**

Answer 1

您可以在涉及conditional revert（here，here和here）的这些SO问题上详细了解它，但这有足够的不同以保证它自己问题

基本上你想在你的revert option对象上设置.draggable()到'invalid'，如果它没有成功地放到一个droppable上，它会返回，如下所示： / p>

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

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

$(".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