Multiple Draggable doesn't work for inserted/created elements via js/jquery

[eren-algan]

When I copy and paste the elements, draggable doesn't work. So I called the variable named DraggableMultiple.init() in my function. it works perfectly for the new added element but the old elements didn'twork. I guess I run the codes multiple time for one element and it became broken.

I wanted to add a video for a good explanation about the problem.

https://github.com/Shopify/draggable/assets/102700797/983c41ee-4f2d-4c2a-8787-654c52a5af20

Which way should I follow to fix this problem? Do you have any recommends?

[eren-algan]

I fixed my problem.

If sortable is already started, I destroy it in my function.

var DraggableMultipleMain = {
    init: function () {
        var e = document.querySelectorAll(".draggable-zone-main");
        if (0 === e.length) return false;
        if (sortableMainInstance) {
            sortableMainInstance.destroy();
        }
        sortableMainInstance = new Draggable.Sortable(e, { 
            draggable: ".draggable-main", 
            handle: ".draggable-main .draggable-handle-main", 
            mirror: { 
                appendTo: "body", 
                constrainDimensions: true 
            } 
        });
    },
};

[bryan844]

With the constructor call from its class it is started and your call to DraggableMultipleMain destroys it.