由 Sortable JS 克隆且其中包含 Select2 的项目不起作用

Question

由 Sortable JS 克隆且其中包含 Select2 的项目不起作用。

我尝试销毁并重新初始化，但它似乎不起作用。

jQuery 代码

            $("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 非常感谢！

Answer 1

不幸的是 select2 正在创建一些自定义内部 ID，您必须在克隆/删除后销毁并重新创建 select2。