Angular：如何基于条件使用Dragula服务实现拖放功能

1. 用TypeScript变量控制是否允许拖放 #

不用通过判断类名来控制，直接在moves回调里用组件的变量就行，但要注意用箭头函数——普通函数里的this指向不是组件实例，拿不到你的变量。

比如在组件里定义一个控制拖放的变量（比如isDragAllowed = false），然后修改createGroup的配置：

// 组件内定义控制拖放的变量
isDragAllowed: boolean = false;

// 初始化Dragula组
this.dragulaService.createGroup('chapters-list', {
  moves: (el, container, handle) => {
    // 直接返回控制变量，true允许拖放，false禁止
    return this.isDragAllowed;
    // 如果需要保留特定手柄的判断，还可以加条件：
    // return this.isDragAllowed && handle.classList.contains('drag-handle');
  }
});

2. 无需多个Dragula服务，合并逻辑 #

你完全不需要创建两个Dragula服务，同一个chapters-list组可以同时配置拖放条件和订阅拖放完成事件。把条件判断加到createGroup里，再保留out事件的订阅即可，完整代码如下：

// 组件内的控制变量
isDragAllowed: boolean = false;

// 初始化Dragula并配置拖放条件
this.dragulaService.createGroup('chapters-list', {
  moves: (el, container, handle) => {
    return this.isDragAllowed; // 用变量控制拖放权限
  }
});

// 订阅拖放完成事件，执行数据库保存逻辑
this.dragulaService.out('chapters-list').subscribe((value) => {
  this.updateSorting(); // 你的保存函数继续正常使用
});

这样就能同时实现：只有当isDragAllowed为true时才允许拖放，拖放完成后自动调用updateSorting保存到数据库，而且全程只用一个Dragula组服务，不会出现冲突。

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