Sortable JS克隆元素内嵌入的Select2组件无法正常使用问题求助

SortableJS执行克隆操作时仅会克隆节点的HTML结构，不会同步克隆元素上绑定的JavaScript事件、Select2实例关联的内存数据以及Select2自动生成的下拉框附属DOM节点，因此克隆后的select元素对应的Select2组件会失去交互能力。直接全局销毁再重建的方案会因为无法匹配到新克隆的实例，导致不生效。

• 调整Sortable目标容器的onAdd钩子逻辑，在元素克隆完成插入后，单独针对新插入的元素做Select2清理和重建
• 清理新克隆元素内Select2残留的无效DOM、事件和实例数据，再针对当前新元素内的select单独初始化Select2，避免重复初始化已有正常实例的select元素
• 若Select2绑定了自定义事件，建议改用事件委托绑定到父级容器，避免每次克隆后重复绑定事件

$("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 (evt) {
    onEndStyle();
    // 获取新插入的克隆元素
    const newClonedItem = evt.item;
    const $targetSelect = $(newClonedItem).find('select');
    // 清理Select2残留内容
    $targetSelect.next('.select2-container').remove();
    $targetSelect.off();
    $targetSelect.removeData('select2');
    // 单独初始化当前select的Select2实例
    $targetSelect.select2();
  },
});

若Select2初始化时有自定义配置（如宽度、选项模板、远程搜索等），重新初始化时要复用相同的配置项。涉及select的交互事件建议改为事件委托绑定到固定父容器，示例：

// 不要直接给select绑定事件，避免克隆后失效
$('.dropped-area').on('change', 'select', function(){
  // 你的事件逻辑
})

内容的提问来源于stack exchange，提问作者Eren GELGEC