是否存在可通过拖拽将段落分组至Div容器的jQuery插件？

当然有合适的jQuery插件可以实现这个需求，jQuery UI Sortable是最常用且适配性强的选择，它支持元素在容器间拖拽移动，同时能保留元素的原有顺序（或允许手动调整顺序）。

实现步骤： #

1. 搭建基础HTML结构
   先把待分组的段落放在一个统一容器中，同时创建用于接收分组的Div容器：

   <div class="paragraphs-source">
     <p>段落1</p>
     <p>段落2</p>
     <p>段落3</p>
     <p>段落4</p>
     <p>段落5</p>
     <p>段落6</p>
     <p>段落7</p>
     <p>段落8</p>
     <p>段落9</p>
   </div>
   <div id="group1" class="group-target">分组1</div>
   <div id="group2" class="group-target">分组2</div>
   

2. 初始化Sortable插件
   引入jQuery和jQuery UI Sortable后，通过以下代码配置拖拽规则：

   $(function() {
     // 配置段落源容器：允许将段落拖拽到分组容器
     $(".paragraphs-source").sortable({
       connectWith: ".group-target",
       items: "p",
       revert: 200
     });
   
     // 配置分组容器：允许接收段落，也支持在分组间互拖调整
     $(".group-target").sortable({
       connectWith: ".paragraphs-source, .group-target",
       placeholder: "drop-placeholder",
       revert: 200
     });
   
     // 禁用文本选中，避免拖拽时干扰操作
     $(".paragraphs-source, .group-target").disableSelection();
   });
   

3. 添加基础样式
   给容器和拖拽占位符设置样式，提升操作直观性：

   .paragraphs-source, .group-target {
     padding: 12px;
     margin: 15px 0;
     border: 1px solid #ddd;
     min-height: 60px;
     background-color: #fff;
   }
   .drop-placeholder {
     height: 2.2em;
     line-height: 2.2em;
     background-color: #f5f5f5;
     border: 1px dashed #999;
     margin: 4px 0;
   }
   

效果说明 #

• 拖拽段落到目标分组Div时，段落会被移动到该容器内，若按原有顺序依次拖拽，就能实现你期望的分组结构；
• 支持在不同分组容器间重新拖拽段落，调整分组；
• 分组内的段落也可以拖拽调整顺序。

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