jquery拖放还原选项

Question

在html中，我有一个列表，列出了10个可拖放的div，称为stacks，还有另一个列表，列出了10个可下垂的div，称为堆栈。每个堆将有唯一的id，将匹配一个堆栈div。

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

当我将匹配的*桩*从堆栈中拖出时，它应该会自动地重新定位到*桩**的确切列表中。

Answer 1

您可以在这些问题上阅读更多关于conditional revert (这里、这里和这里)的内容，但这是完全不同的，因此有理由提出自己的问题。

基本上，您希望在您的revert option对象上将'invalid'设置为'invalid'，如果没有成功地将其放置到可下垂的位置，它将返回，如下所示：

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

下面是一个好玩的演示：

有趣的水果混合与匹配实例