如何在Ionic 3+Angular 4中配置Ng-Dragula的精细拖拽约束？

嘿，我刚好在项目里用过Ng-Dragula做过类似的拖拽规则配置，针对你这种三列的特定拖拽限制，核心是利用Ng-Dragula的accepts回调函数来精准控制，下面给你一步步拆解实现：

1. 给三列容器标记唯一的Dragula容器名 #

在你的模板里，给每一列的容器元素加上[dragula]指令，指定专属的容器名称，比如用Ionic的栅格布局来实现三列：

<ion-grid>
  <ion-row>
    <!-- 第一列容器 -->
    <ion-col [dragula]="'first-column'">
      <ion-card *ngFor="let item of firstColumnItems">
        {{ item.title }}
      </ion-card>
    </ion-col>

    <!-- 第二列容器 -->
    <ion-col [dragula]="'second-column'">
      <ion-card *ngFor="let item of secondColumnItems">
        {{ item.title }}
      </ion-card>
    </ion-col>

    <!-- 第三列容器 -->
    <ion-col [dragula]="'third-column'">
      <ion-card *ngFor="let item of thirdColumnItems">
        {{ item.title }}
      </ion-card>
    </ion-col>
  </ion-row>
</ion-grid>

2. 在组件中配置Dragula的拖拽规则 #

在你的Angular组件里，注入DragulaService，然后通过setOptions方法自定义accepts函数——这个函数会在每次拖拽时判断是否允许元素放入目标容器，完全匹配你要的规则：

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

@Component({
  selector: 'app-drag-container',
  templateUrl: './drag-container.component.html',
  styleUrls: ['./drag-container.component.scss']
})
export class DragContainerComponent {
  // 示例列表数据
  firstColumnItems = [{title: '第一列元素1'}, {title: '第一列元素2'}];
  secondColumnItems = [{title: '第二列元素1'}, {title: '第二列元素2'}];
  thirdColumnItems = [{title: '第三列元素1'}, {title: '第三列元素2'}];

  constructor(private dragulaService: DragulaService) {
    // 配置第一列的拖拽规则：只能拖到第二列
    this.dragulaService.setOptions('first-column', {
      accepts: (el, target, source) => {
        return target.getAttribute('dragula') === 'second-column';
      }
    });

    // 配置第二列的拖拽规则：只能拖到第三列
    this.dragulaService.setOptions('second-column', {
      accepts: (el, target, source) => {
        return target.getAttribute('dragula') === 'third-column';
      }
    });

    // 配置第三列的拖拽规则：只能拖到第二列
    this.dragulaService.setOptions('third-column', {
      accepts: (el, target, source) => {
        return target.getAttribute('dragula') === 'second-column';
      }
    });
  }
}

3. 额外注意事项 #

• 确保你已经正确安装并导入Ng-Dragula：在app.module.ts里导入DragulaModule.forRoot()并添加到imports数组中；
• 如果需要同步拖拽后的列表数据（比如元素从源列表移到目标列表），可以监听DragulaService的drop事件，手动更新对应的数组；
• 要是想给用户更直观的拖拽反馈（比如禁止拖拽时改变鼠标样式），可以结合drag和over事件来动态修改元素样式。

这样配置后，就完全符合你要求的拖拽规则了：第一列→第二列、第二列→第三列、第三列→第二列，其他拖拽路径都会被系统自动禁止。

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