1

在 html 中，我有一个包含 10 个可拖动的列表，div称为piles和另一个包含 10 个 droppablediv的列表，称为stacks。每个堆都有唯一的 id，将与其中一个堆栈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**
4

1 回答 1

1

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

基本上你想在你的对象上设置revert optionto ，如果它没有成功地放到一个 droppable 上，它会返回，像这样：'invalid'.draggable()

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

这是一个有趣的演示：

有趣的水果混合搭配示例

于 2013-10-16T20:19:18.473 回答