jQuery UI拖拽元素后Sortable组件异常问题求助

我来帮你捋清楚问题所在，以及怎么修复这个拖拽排序的异常：

问题根源 #

你当前的drop事件逻辑存在核心错误：

• 在第一个分支中，你克隆了元素但没有将克隆体添加到放置区，反而把原拖拽区的元素(item)直接追加到了dropzone里。这就导致dropzone里的DOM节点其实是原拖拽区的元素，所以排序时移动的自然是原区域的内容。
• 第二个分支的逻辑也不合理：$(ui.helper).clone()克隆的是拖拽时的临时辅助元素，不是原元素的完整克隆，而且没有处理样式和事件绑定的问题。

修正后的代码方案 #

下面是调整后的完整JS代码，我会逐行解释关键改动：

$(document).ready(function() {
  // 原拖拽区元素的拖拽配置：使用克隆辅助元素，拖拽后原元素留在原地
  $('.draggable-element').draggable({
    revert: 'invalid',
    appendTo: '.dropzone',
    helper: 'clone'
  });

  $('.dropzone')
    .droppable({
      drop: function (event, ui) {
        // 克隆原拖拽元素，true参数表示复制元素的事件绑定
        const clonedItem = $(ui.draggable).clone(true);
        // 给克隆体添加标识类，区分原元素，同时移除原拖拽类（可选，避免克隆体被再次拖拽回原区域）
        clonedItem.addClass('dropped-item').removeClass('draggable-element');
        // 修正拖拽辅助元素带来的绝对定位样式，确保在放置区正常显示
        clonedItem.css({
          position: 'relative',
          top: 'auto',
          left: 'auto',
          margin: '10px 0' // 可选，增加间距方便排序
        });
        // 将克隆体添加到放置区
        $(this).append(clonedItem);
      }
    })
    .sortable({
      // 指定sortable作用的元素，确保只排序放置区里的克隆元素
      items: '.dropped-item',
      // 可选：排序时的视觉反馈
      placeholder: 'sortable-placeholder'
    });
});

关键改动说明 #

• 移除了原代码中混乱的分支判断，直接克隆原拖拽元素并添加到放置区，保证原元素始终留在拖拽区。
• 给克隆体添加专属类dropped-item，让sortable只作用于这些元素，避免影响原拖拽区的内容。
• 修正了拖拽辅助元素带来的position:absolute样式问题，确保克隆元素在放置区正常排版。
• 使用clone(true)复制原元素的事件绑定（如果需要克隆体也能被拖拽到其他位置的话），如果不需要克隆体再拖拽，可以去掉true参数。

可选的CSS优化 #

为了让排序体验更好，可以添加占位符样式：

.sortable-placeholder {
  height: 60px;
  border: 2px dashed #ccc;
  margin: 10px 0;
}

这样调整后，拖拽元素到放置区时会克隆新元素留在放置区，原元素不动，而且放置区内的克隆元素可以正常排序，不会再影响原拖拽区的内容。

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