How do you reset moved objects with Dragula?

Question

I've started working with Dragula and I'm having elements be moved from one box to another. However, I want to be able to click a button and have the Dragula elements be placed back where they were before, basically resetting it. I've looked around for a solution but I can't seem to find any anywhere, so if anyone can help me with this I'd appreciate it.

Answer 1

You are going to want to pull out the HTML data from the two boxes compile the data and reset then second box.

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

Hope this helps, just remember all you and doing is targeting the box2 and pulling out the information.

Here is another version that is not quite as clean but easier to follow:

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

Answer 2

To do this, I added an initial attribute data-initial-group-id in each of the movable elements, and then did the following, when the reset button is clicked:

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

In simple terms, I passed the original parent element id as a data attribute of the movable element, and then placed all elements back to their parents.