jQuery UI拖拽克隆元素后无法二次拖拽问题求助

这个问题我太熟悉了！你遇到的核心问题很明确：克隆出来的新元素并没有被初始化draggable()方法——你只给页面初始的.draggable元素绑定了拖拽事件，但克隆生成的是全新的DOM节点，它们并没有继承原始元素的拖拽行为。

解决方案思路 #

• 克隆元素时给它添加一个专属类名（比如cloned-draggable），方便后续定位和初始化
• 每次完成克隆后，立即对这个新生成的元素调用draggable()，绑定拖拽事件
• 按需配置拖拽选项：如果希望克隆体可以被再次拖拽移动（而非再次克隆），可以去掉helper:'clone'；如果需要支持多次克隆，就保留该配置

修改后的完整代码示例 #

<!-- HTML结构 -->
<div class="draggable">
  <img src="your-image-url.jpg" alt="拖拽图片">
</div>

<div class="droppable">
  <div class="center-div">
    <!-- 克隆元素会被添加到这里 -->
  </div>
</div>

<!-- CSS样式（补全你未写完的部分） -->
<style>
.draggable {
  width: 100px;
  height: 100px;
  margin: 10px;
  cursor: move;
}
.droppable {
  width: 400px;
  height: 400px;
  border: 2px dashed #ccc;
  padding: 10px;
}
.center-div {
  width: 100%;
  height: 100%;
}
.cloned-draggable {
  width: 100px;
  height: 100px;
  margin: 5px;
  cursor: move;
  position: relative; /* 确保拖拽时定位正常 */
}
</style>

<!-- JavaScript代码 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
<script>
$(function() {
  // 初始化原始拖拽元素
  $(".draggable").draggable({
    helper: 'clone'
  });

  // 初始化目标放置区域
  $(".droppable").droppable({
    accept: ".draggable",
    drop: function (event, ui) {
      // 克隆元素并添加专属类名
      const clonedElement = $(ui.draggable).clone().addClass('cloned-draggable');
      // 将克隆元素添加到目标区域
      $(".center-div").append(clonedElement);
      // 初始化克隆元素的拖拽功能（这里配置为可移动，如需再次克隆可保留helper:'clone'）
      clonedElement.draggable({
        containment: ".center-div" // 可选：限制拖拽范围在目标区域内
      });
    }
  });
});
</script>

关键细节说明 #

• 给克隆元素添加cloned-draggable类，既可以区分原始元素，也能避免重复给原始元素绑定事件
• 直接对clonedElement调用draggable()，确保只初始化刚生成的那个元素，不会影响已存在的克隆体
• 添加containment: ".center-div"可以让克隆体只能在目标区域内拖拽，提升用户体验

如果需要让克隆体也支持再次克隆（和原始元素一样），只需要把克隆元素的draggable配置改成：

clonedElement.draggable({
  helper: 'clone',
  containment: ".center-div"
});

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