如何使用jQuery UI使拖拽克隆后的元素可再次拖拽？

这个问题我太熟了！你遇到的是动态DOM元素的事件绑定典型问题——页面初始化时，你只给原本就存在的#element下的元素绑定了拖拽功能，但克隆出来的新元素是后续动态生成的DOM节点，它们并没有被初始化拖拽逻辑，所以没法再次拖拽。

解决思路：克隆后立即给新元素初始化拖拽 #

在droppable的drop事件回调里，当你把克隆元素添加到目标容器后，立刻调用.draggable()给它加上拖拽能力就行。下面是结合你代码场景的完整示例：

<!-- 原始可拖拽模板 -->
<div class="row" id="element">
  <div class="portlet ui-widget-content">
    <!-- 你的拖拽内容 -->
    可拖拽模块
  </div>
</div>

<!-- 目标放置容器 -->
<div id="droppable" class="ui-widget-header">
  <!-- 克隆元素会被添加到这里 -->
</div>

<script>
$(function() {
  // 初始化原始元素的拖拽，设置为克隆模式
  $("#element .portlet").draggable({
    helper: "clone", // 拖拽时生成克隆体
    revert: "invalid" // 没放到容器里就弹回去
  });

  // 初始化放置容器
  $("#droppable").droppable({
    accept: ".portlet",
    drop: function(event, ui) {
      // 克隆拖拽的元素，true参数保留原始元素的事件绑定
      const clonedItem = ui.helper.clone(true);
      
      // 把克隆元素加入目标容器
      $(this).append(clonedItem);
      
      // 关键一步：给新克隆的元素初始化拖拽功能
      clonedItem.draggable({
        revert: "invalid", // 可以根据需求添加其他配置，比如cursor、containment等
        // 如果你想让克隆元素能在容器内排序，还可以结合sortable，这里先做基础拖拽
      });
    }
  });
});
</script>

几个要注意的细节： #

• 克隆时用clone(true)：这个true会让克隆体继承原始元素的事件，但jQuery UI的拖拽插件初始化不会自动继承，所以还是要手动给新元素调用.draggable()。
• 同步拖拽配置：如果你的原始拖拽有自定义配置（比如限制拖拽范围、设置拖拽光标），记得在给克隆元素初始化时同步这些参数，保证行为一致。
• 要是你需要克隆元素能在容器内自由排序，可以把目标容器同时初始化sortable，配合拖拽功能会更流畅。

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