如何实现PrimeNG p-table行拖拽投放至多个pDroppable容器功能

1. 依赖导入 #

首先在对应Angular功能模块中引入PrimeNG拖拽模块：

• 导入语句：import { DragDropModule } from 'primeng/dragdrop';
• 将DragDropModule加入到@NgModule的imports数组中生效

2. 模板层配置 #

2.1 p-table行拖拽配置 #

给表格每一行绑定pDraggable属性，指定拖拽组标识和传递的行数据：

<p-table [value]="tableData">
  <ng-template pTemplate="body" let-rowData>
    <tr 
      pDraggable="tableRowItem"
      [dragData]="rowData"
      dragEffect="move"
    >
      <td>{{rowData.id}}</td>
      <td>{{rowData.content}}</td>
      <!-- 其他列自定义渲染 -->
    </tr>
  </ng-template>
</p-table>

2.2 多投放容器配置 #

所有接收拖拽的容器绑定pDroppable属性，和拖拽组标识保持一致，同时绑定投放事件区分不同容器：

<!-- 支持循环生成任意数量投放容器，示例为8个容器 -->
<div 
  *ngFor="let container of dropContainerList; let idx = index"
  pDroppable="tableRowItem"
  (onDrop)="onItemDrop($event, idx)"
  class="drop-box"
>
  <h4>第{{idx+1}}个投放容器</h4>
  <div class="dropped-item" *ngFor="let item of container.itemList">
    {{item.content}}
  </div>
</div>

注意：pDraggable与pDroppable绑定的组标识必须完全一致，否则拖拽元素无法被对应容器识别接收。

3. 逻辑层处理 #

// 表格原始数据源
tableData: any[] = [];
// 初始化8个空投放容器
dropContainerList: {itemList: any[]}[] = Array.from({length: 8}, () => ({itemList: []}));

// 投放事件处理
onItemDrop(dragEvent: any, containerIndex: number) {
  // 获取拖拽传递的表格行数据
  const draggedRow = dragEvent.dragData;
  // 将数据推入对应目标容器的列表中
  this.dropContainerList[containerIndex].itemList.push(draggedRow);

  // 可选逻辑：拖拽完成后从原表格删除该行
  // const originIndex = this.tableData.findIndex(item => item.id === draggedRow.id);
  // if(originIndex > -1) this.tableData.splice(originIndex, 1);
}

4. 交互样式优化（可选） #

/* 拖拽过程中原始行透明度调整 */
tr.p-dragging {
  opacity: 0.4;
  cursor: move;
}
/* 投放容器被拖拽元素悬停时的高亮样式 */
.drop-box.p-drag-over {
  border: 2px dashed #1677ff;
  background: #e6f4ff;
}
/* 投放容器基础样式 */
.drop-box {
  min-height: 120px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 12px;
  margin: 10px 0;
}

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