求助：如何用ng2-dragula实现相邻行内多元素拖拽补位？

我来帮你搞定这个ng2-dragula的拖拽难题！你遇到的核心问题是拖拽完成后原位置没有被目标位置的元素自动填补——这是因为ng2-dragula默认只做元素移动，不会处理这种“交换填补”的自定义逻辑。下面我分两种方式帮你解决：一种是基于ng2-dragula改造，另一种是更推荐的替代方案。

首先确保你已经正确引入了ng2-dragula模块，接下来通过监听拖拽事件手动实现填补效果：

1. 基础组件代码示例 #

import { Component } from '@angular/core';
import { DragulaService } from 'ng2-dragula';

@Component({
  selector: 'app-drag-row',
  template: `
    <div class="row" [dragula]="'row-bag'">
      <div class="item" *ngFor="let item of row1">{{item}}</div>
    </div>
    <div class="row" [dragula]="'row-bag'">
      <div class="item" *ngFor="let item of row2">{{item}}</div>
    </div>
  `,
  styles: [`.row { display: flex; margin: 15px 0; gap: 8px; } .item { padding: 10px 16px; border: 1px solid #ddd; border-radius: 4px; cursor: grab; }`]
})
export class DragRowComponent {
  row1 = ['元素A', '元素B', '元素C', '元素D'];
  row2 = ['元素X', '元素Y', '元素Z'];

  constructor(private dragulaService: DragulaService) {
    // 监听拖拽完成的drop事件
    this.dragulaService.drop('row-bag').subscribe(({ el, target, source }) => {
      this.handleFillLogic(el, target, source);
    });
  }

  private handleFillLogic(el: HTMLElement, target: HTMLElement, source: HTMLElement) {
    // 获取拖拽元素的内容
    const draggedText = el.textContent?.trim();
    if (!draggedText) return;

    // 匹配原容器和目标容器对应的数组
    const sourceArray = source === document.querySelectorAll('.row')[0] ? this.row1 : this.row2;
    const targetArray = target === document.querySelectorAll('.row')[0] ? this.row1 : this.row2;

    // 找到拖拽元素在原数组中的位置
    const sourceIndex = sourceArray.indexOf(draggedText);
    if (sourceIndex === -1) return;

    // 找到拖拽元素在目标容器中的插入位置
    const targetChildren = Array.from(target.children);
    const insertIndex = targetChildren.indexOf(el);

    // 核心：把目标位置的元素移到原数组的空缺处
    if (insertIndex < targetArray.length) {
      const fillItem = targetArray[insertIndex];
      // 从目标数组移除填补元素，插入到原数组的拖拽位置
      targetArray.splice(insertIndex, 1);
      sourceArray.splice(sourceIndex, 0, fillItem);
    }

    // 把拖拽元素从原数组移除，插入到目标数组的对应位置
    sourceArray.splice(sourceIndex, 1);
    targetArray.splice(insertIndex, 0, draggedText);
  }
}

2. 多相邻元素拖拽的扩展 #

如果需要拖拽多个相邻元素，你可以先实现多选逻辑（比如按住Shift键选中连续元素），然后修改handleFillLogic方法批量处理：

// 先添加选中状态管理
selectedItems: string[] = [];

onItemClick(item: string, event: MouseEvent) {
  if ((event as any).shiftKey) {
    // 这里可以扩展Shift键多选相邻元素的逻辑，示例简化为直接选中当前元素
    this.selectedItems.push(item);
  } else {
    this.selectedItems = [item];
  }
}

// 修改handleFillLogic为批量处理
private handleFillLogic(el: HTMLElement, target: HTMLElement, source: HTMLElement) {
  const sourceArray = source === document.querySelectorAll('.row')[0] ? this.row1 : this.row2;
  const targetArray = target === document.querySelectorAll('.row')[0] ? this.row1 : this.row2;
  const insertIndex = Array.from(target.children).indexOf(el);

  // 批量移除原数组中的选中元素
  this.selectedItems.forEach(item => {
    const idx = sourceArray.indexOf(item);
    if (idx !== -1) sourceArray.splice(idx, 1);
  });

  // 批量取目标位置的元素填补原数组
  const fillItems = targetArray.slice(insertIndex, insertIndex + this.selectedItems.length);
  fillItems.forEach((item, idx) => {
    targetArray.splice(insertIndex, 1);
    sourceArray.splice(sourceArray.indexOf(this.selectedItems[0]) + idx, 0, item);
  });

  // 批量插入选中元素到目标数组
  this.selectedItems.forEach(item => {
    targetArray.splice(insertIndex, 0, item);
  });

  // 清空选中状态
  this.selectedItems = [];
}

如果ng2-dragula的自定义逻辑太繁琐，推荐使用Angular官方的CDK拖拽模块——它原生支持跨容器拖拽、元素交换，文档更完善，维护更可靠：

基础示例（自动实现填补逻辑） #

import { Component } from '@angular/core';
import { CdkDragDrop, transferArrayItem } from '@angular/cdk/drag-drop';

@Component({
  selector: 'app-cdk-drag',
  template: `
    <div class="row" cdkDropList [cdkDropListData]="row1" (cdkDropListDropped)="onDrop($event)">
      <div class="item" cdkDrag *ngFor="let item of row1">{{item}}</div>
    </div>
    <div class="row" cdkDropList [cdkDropListData]="row2" (cdkDropListDropped)="onDrop($event)">
      <div class="item" cdkDrag *ngFor="let item of row2">{{item}}</div>
    </div>
  `,
  styles: [`.row { display: flex; margin: 15px 0; gap: 8px; } .item { padding: 10px 16px; border: 1px solid #ddd; border-radius: 4px; cursor: grab; }`]
})
export class CdkDragComponent {
  row1 = ['元素A', '元素B', '元素C', '元素D'];
  row2 = ['元素X', '元素Y', '元素Z'];

  onDrop(event: CdkDragDrop<string[]>) {
    if (event.previousContainer !== event.container) {
      // 先把目标位置的元素移到原容器填补空缺
      if (event.currentIndex < event.container.data.length) {
        transferArrayItem(
          event.container.data,
          event.previousContainer.data,
          event.currentIndex,
          event.previousIndex
        );
      }
      // 再把拖拽元素移到目标容器
      transferArrayItem(
        event.previousContainer.data,
        event.container.data,
        event.previousIndex,
        event.currentIndex
      );
    }
  }
}

这个方案的优势是：官方维护、API更直观，多元素拖拽可以通过cdkDragGroup轻松实现，不需要写大量自定义逻辑。

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