如何使用Dragula重置移动的对象

Question

我已经开始使用Dragula，我正在将元素从一个框移动到另一个框。然而，我希望能够点击一个按钮，将Dragula元素放回原来的位置，基本上重置它。我四处寻找解决方案，但似乎在任何地方都找不到，所以如果有人能帮助我，我将不胜感激。

Answer 1

您需要从两个框中提取HTML数据，编译数据并重置第二个框。

// reset toppings using JQuery each() method
$("#box2").each(function () {
$("#box").append(this);
});

希望这能有所帮助，只要记住你所做的就是瞄准盒子2并提取信息。

这是另一个不太干净但更容易遵循的版本：

var dragged = $("#box2").html();
var notDragged = $("#box1").html();
var original = dragged + notDragged ;
$("#box1").html(original);
$("#box2").html("");

Answer 2

为此，我在每个可移动元素中添加了一个初始属性data-initial-group-id，然后在单击重置按钮时执行以下操作：

$(".movable-element").each(function() {
$("#group_"+$(this).data('initialGroupId')).append($(this));
});

简单地说，我将原始父元素id作为可移动元素的数据属性传递，然后将所有元素放回它们的父元素。