使用ng2-dragula在您的Angular应用程序中拖放

德拉古拉是一个流行的用于拖放的 JavaScript 库，并且 ng2-dragula 是在 Angular 2+ 应用程序中使用 Dragula 的包装器。 让我们看看它是如何使用的。

安装

首先使用 Yarn 或 npm 将 ng2-dragula 添加到您的项目中：

# Yarn
$ yarn add ng2-dragula

# npm
$ npm install ng2-dragula --save

现在导入 DragulaModule 并将其添加到 NgModule 的导入中：

app.module.ts

// ...

import { DragulaModule } from 'ng2-dragula/ng2-dragula';

最后一个设置步骤是将 Dragula CSS 文件添加到项目中。 如果您使用的是 Angular CLI，您只需在 .angular-cli.json 文件中添加 CSS 文件路径：

"styles": [
  "styles.css",
  "../node_modules/dragula/dist/dragula.css"
],

使用 ng2-dragula

现在要使用它，就像在模板中的容器元素上使用 dragula 指令并提供组名一样简单。 Dragula 中的组称为包：

<ul [dragula]='"bag-items"'>
  <li *ngFor="let item of items">{{ item }}</li>
</ul>

如果您有多个不同的容器：

<ul [dragula]='"bag-items"'>
  <li *ngFor="let item of items">{{ item }}</li>
</ul>

<ul [dragula]='"bag-people"'>
  <li *ngFor="let person of people">{{ person }}</li>
</ul>

---

如果您希望更改以在您的项目数组中同步，只需使用带有模型名称的 dragulaModel 指令。 这样，当通过拖放重新排序项目时，项目数组也将重新排序其项目以反映更改：

<ul [dragula]='"bag-items"' [dragulaModel]='items'>
  <li *ngFor="let item of items">{{ item }}</li>
</ul>

事件和配置选项

您可以使用 DragulaService 挂钩事件或设置配置选项。

配置

要使用该服务，首先将其导入并注入到构造函数中。 然后就像调用 setOptions 方法一样简单，指定容器并提供带有所需选项的对象文字：

import { Component, OnInit } from '@angular/core';

import { DragulaService } from 'ng2-dragula/ng2-dragula';

@Component({ ... })
export class AppComponent implements OnInit {
  constructor(private dragula: DragulaService) {
    this.dragula.setOptions('bag-items', {
      revertOnSpill: true
    });
  }
}

可以设置direction、copy、copySortSource、revertOnSpill、removeOnSpill和mirrorContainer等选项。 配置选项参考项目页面。

活动

您可以挂钩 drag、drop、over 和 out 事件，并且每个事件都返回一个 observable。 这是一个完整的示例，在拖放项目时会显示一条消息：

import { Component, OnInit } from '@angular/core';

import { DragulaService } from 'ng2-dragula/ng2-dragula';

@Component({ ... })
export class AppComponent implements OnInit {
  msg = '';

  items = [
    'Candlestick',
    'Dagger',
    'Revolver',
    'Rope',
    'Pipe',
    'Wrench'
  ];

  constructor(private dragula: DragulaService) { }

  ngOnInit() {
    this.dragula
      .drag
      .subscribe(value => {
        this.msg = `Dragging the ${ value[1].innerText }!`;
      });

    this.dragula
      .drop
      .subscribe(value => {
        this.msg = `Dropped the ${ value[1].innerText }!`;

        setTimeout(() => {
          this.msg = '';
        }, 1000);
      });
  }
}

拖放事件 observables 返回的值是一个包含包名称的数组（例如： 袋子物品 )、被拖动的元素和容器元素（

元素）。