ng2-dragula使用教程

---

项目介绍

ng2-dragula 是一个基于 Angular 2+ 的拖放服务，允许开发者轻松实现文件或元素在网页上的拖拽排序和转移功能。该项目由 Valor Software 开发维护，它高度定制化，易于集成，且充分利用了 Dragula 库的强大拖放能力，专门为 Angular 生态系统设计。

项目快速启动

要快速开始使用 ng2-dragula，请遵循以下步骤：

安装依赖

首先，在你的 Angular 项目中安装 ng2-dragula 和其必要的 Peer Dependencies。

npm install dragula ng2-dragula --save

添加模块到你的应用

接着，在你的 AppModule 中导入 DragulaModule：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { DragulaModule } from 'ng2-dragula';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    DragulaModule.forRoot() // 这里添加 DragulaModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

使用示例

在组件模板中引入拖拽容器：

<div [dragula]='"bag-one"' class="container">
  <div *ngFor="let item of items">{{item}}</div>
</div>

<div [dragula]='"bag-two"' class="container"></div>

并在组件类中初始化数据：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  items = ['Item 1', 'Item 2', 'Item 3'];

  constructor(private dragulaService: DragulaService) {
    this.dragulaService.setOptions('bag-one', {
      moves: function (el, source, handle, sibling) {
        return handle.classList.contains('handle');
      }
    });
  }

  ngOnInit(): void {}
}

这段代码创建了两个可拖拽的区域，其中 items 是可以被拖动的数据列表。

应用案例和最佳实践

在实际应用中，ng2-dragula 可以用于任务管理器、多选过滤视图、布局编辑器等场景。最佳实践包括明确拖放目标（通过 CSS 类控制），监听事件进行复杂的逻辑处理（如数据模型同步更新），以及利用 dragulaService 提供的方法来控制拖放行为。

例如，监听 drop 事件保持数据模型的一致性：

this.dragulaService.drop.subscribe((value) => {
  const [e, target] = value;
  // 更新数据模型，确保与 DOM 状态一致
});

典型生态项目

尽管 ng2-dragula 已经是很多 Angular 应用的标准选择，但在 Angular 生态系统中，还有其他库可能提供相似或扩展的功能，比如 @angular/cdk/drag-drop，这是一个来自 Angular 官方团队的解决方案，适用于更复杂的需求和对无障碍性的高级支持。然而，对于轻量级和直接易用的拖放需求，ng2-dragula 仍然是非常受欢迎的选择。

---

这个教程为你提供了基本的指导，帮助你快速上手并有效地在 Angular 应用中使用 ng2-dragula。通过实践这些步骤，你可以探索更多高级特性和定制化选项，从而在你的项目中创造出流畅的用户体验。