CODEWITHSUNDEEP
jquerydrag-and-dropjquery-select2sortablejs
Eren GELGEC
Eren GELGEC

Reputation: 75

Items that cloned by Sortable JS which have Select2 inside them are not working

Items that cloned by Sortable JS which have Select2 inside them are not working.

I tried to destroy and re-init but it didn't seem to work.

Jquery Code

            $("select").select2();
        function cleanDrop() {
        $(".dropped-area").removeClass("unsetter");
        $(".dropped-area").addClass("setter row");

        $(".placeholder-drop").removeClass("d-flex");
        $(".placeholder-drop").hide();
        }
        function onEndStyle() {
        $(".dropped-area > div").removeClass("col-lg-3 col-md-4");
        $(".dropped-area > div").addClass("col-12 new-style");
        }
        new Sortable(pullContainer, {
        group: {
            name: "shared",
            pull: "clone",
            put: false,
        },
        sort: false,
        animation: 150,
        chosenClass: "xdd",
        ghostClass: "zaa",
        cancel: ".select2",
        onMove: function () {
            cleanDrop();
        },
        });
        new Sortable(targetContainer, {
        group: {
            name: "shared",
            pull: "clone",
        },
        draggable: ".new-style",
        handle: ".handle",
        animation: 150,
        onAdd: function () {
            onEndStyle();
        },
        });

Codepen Link Thanks a lot!

Upvotes: 0

Views: 365

Answers (1)

Michał Moskal
Michał Moskal

Reputation: 328

Unfortunately select2 is creating some custom internal IDs, You must destroy and recreate select2 after cloning / drop.

Upvotes: 1

Related Questions