jQuery拖拽排序列表需求：将字段拖入已添加的Fieldset

嘿，我已经更新了jsfiddle中的代码，这个方案完全能实现你要的功能：既保留fieldset在目标div里的拖拽排序，又能把field拖入已有的fieldset内部，而不会替换fieldset的位置。

下面是具体的实现思路和代码细节：

核心思路 #

我们需要区分两个层级的交互：

• 外层：目标div负责fieldset之间的拖拽排序
• 内层：每个fieldset作为field的放置容器，接受field的拖拽

具体实现步骤 #

1. 配置外层排序（fieldset之间的排序）
   给目标div设置sortable，通过items选项明确只对fieldset生效，避免field干扰这个层级的排序：

   $("#sortable-div").sortable({
     items: "fieldset", // 仅允许fieldset参与排序
     placeholder: "fieldset-placeholder", // 排序时的占位样式
     revert: true
   });
   

2. 设置field为可拖拽元素
   给所有field添加拖拽能力，用clone作为拖拽助手，避免原元素被直接移走（如果需要移除原元素可以后续处理）：

   $(".field").draggable({
     helper: "clone", // 拖拽时克隆元素
     revert: "invalid", // 拖到无效区域时返回原位置
     cursor: "move"
   });
   

3. 让fieldset成为可放置目标
   给每个fieldset配置droppable，指定只接受.field元素，并且在drop事件里把field添加到fieldset内部的容器中：

   $("fieldset").droppable({
     accept: ".field", // 仅接受field元素
     hoverClass: "fieldset-hover", // 拖拽悬停时的高亮样式
     drop: function(event, ui) {
       // 将拖拽的field克隆后添加到当前fieldset的内部容器
       $(this).find(".fields-container").append(ui.draggable.clone());
       // 如果需要移除原field，取消下面的注释：
       // ui.draggable.remove();
     }
   });
   

4. 添加样式提升交互体验
   给占位符、悬停状态和元素添加基础样式，让拖拽过程更直观：

   /* fieldset排序时的占位样式 */
   .fieldset-placeholder {
     border: 2px dashed #ccc;
     height: 60px;
     margin: 10px 0;
   }
   
   /* fieldset被拖拽悬停时的高亮样式 */
   .fieldset-hover {
     border: 2px dashed #007bff;
     background-color: rgba(0,123,255,0.1);
   }
   
   /* field的基础样式 */
   .field {
     padding: 8px;
     margin: 5px 0;
     background: #f8f9fa;
     border: 1px solid #dee2e6;
     cursor: move;
   }
   
   /* fieldset的基础样式 */
   fieldset {
     margin: 10px 0;
     padding: 15px;
     border: 1px solid #ddd;
   }
   
   /* 存放field的内部容器 */
   .fields-container {
     margin-top: 10px;
   }
   

5. 对应的HTML结构
   确保fieldset内部有专门的容器来存放field，方便后续添加：

   <!-- 可排序的fieldset容器 -->
   <div id="sortable-div">
     <fieldset>
       <legend>Fieldset 1</legend>
       <div class="fields-container"></div>
     </fieldset>
     <fieldset>
       <legend>Fieldset 2</legend>
       <div class="fields-container"></div>
     </fieldset>
   </div>
   
   <!-- 可拖拽的field源 -->
   <div id="fields-source">
     <div class="field">Field A</div>
     <div class="field">Field B</div>
     <div class="field">Field C</div>
   </div>
   

这样设置后，你就能实现：

• 拖动fieldset在目标div里重新排序
• 拖动field到任意fieldset内部，field会被添加到fieldset里，而不会替换fieldset的位置

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