npm 包 ang-drag-drop 使用教程

本文介绍 npm 包 ang-drag-drop 的使用方法，该包是一个 Angular 2+ 的可跨浏览器、兼容移动端的拖放指令。

安装

使用 npm 进行安装：

npm install ang-drag-drop --save

引入模块

在 Angular 的模块中引入 ang-drag-drop：

import { DragDropModule } from 'ang-drag-drop';

@NgModule({
  imports: [
    DragDropModule.forRoot()
  ]
})

使用示例

对于一个需要拖放功能的元素，我们给它分别绑定 dragStart 和 dragEnd 事件，其中在 dragStart 事件中我们会得到这个元素的唯一标识符，用于在后续操作中标识该元素，示例代码如下：

<div
  class="draggable"
  dragDrop
  [dragData]="item.id"
  (onDragStart)="dragStart($event)"
  (onDragEnd)="dragEnd($event)"
>
  {{ item.name }}
</div>

items = [{
  id: 1,
  name: 'item 1'
}, {
  id: 2,
  name: 'item 2'
}];

dragStart(event: any) {
  console.log('drag started', event);
}

dragEnd(event: any) {
  console.log('drag ended', event);
}

然后对于可放置元素的区域，我们绑定 drop 事件，同时在 drop 事件中使用拖放数据来进行操作，示例代码如下：

<div class="droppable" dragDrop (onDrop)="drop($event)">
  <div *ngFor="let item of itemsInArea" class="draggable">{{ item.name }}</div>
</div>

itemsInArea = [];

drop(event: any) {
  const item = this.items.find(i => i.id === event.dragData);
  this.itemsInArea.push(item);
  console.log('dropped', event);
}

高级用法

上面的例子只是使用了最基本的功能，但 ang-drag-drop 还提供了其他许多功能，例如：

设置容器区域范围

在容器元素上绑定 dragEnter 和 dragLeave 事件，可以在事件中添加容器效果，例如：

<div class="droppable" dragDrop (onDrop)="drop($event)" (onDragEnter)="dragEnter($event)" (onDragLeave)="dragLeave($event)">
  <div *ngFor="let item of itemsInArea" class="draggable">{{ item.name }}</div>
</div>

dragEnter(event: any) {
  this.renderer.setStyle(event.target, 'border', 'dashed 4px green');
}

dragLeave(event: any) {
  this.renderer.setStyle(event.target, 'border', 'none');
}

拖放事件回调

可以绑定多种拖放事件回调，例如 dragEnter、dragOver、dragLeave 等，在事件回调中添加自定义样式或其他操作，示例代码如下：

<div
  class="draggable"
  dragDrop
  [dragData]="item.id"
  (onDragStart)="dragStart($event)"
  (onDragEnd)="dragEnd($event)"
>
  {{ item.name }}
</div>

dragStart(event: any) {
  console.log('drag started', event);
}

...(省略其它部分)...

dragEnter(event: any) {
  console.log('drag entered', event);
}

dragOver(event: any) {
  console.log('drag over', event);
}

dragLeave(event: any) {
  console.log('drag left', event);
}

自定义拖放图标

我们可以在元素的 dragStart 事件中手动设置自定义拖放图标，示例代码如下：

<div
  class="draggable"
  dragDrop
  [dragData]="item.id"
  (onDragStart)="dragStart($event)"
  (onDragEnd)="dragEnd($event)"
>
  {{ item.name }}
</div>

dragStart(event: any) {
  event.dataTransfer.setDragImage(event.target, 100, 100);
}

暂停和恢复拖放

我们可以通过 dragEnabled 属性来临时禁用拖放功能，然后再通过 enableDrag() 和 disableDrag() 方法来启用或禁用拖放功能，示例代码如下：

<div
  class="draggable"
  dragDrop
  [class.disabled]="disabled"
  [dragEnabled]="dragEnabled"
  [dragData]="item.id"
  (onDragStart)="dragStart($event)"
  (onDragEnd)="dragEnd($event)"
>
  {{ item.name }}
</div>

disabled = false;
dragEnabled = true;

toggle() {
  this.disabled = !this.disabled;
  if (this.disabled) {
    this.disableDrag();
  } else {
    this.enableDrag();
  }
}

disableDrag() {
  this.dragEnabled = false;
}

enableDrag() {
  this.dragEnabled = true;
}

小结

这篇文章介绍了使用 npm 包 ang-drag-drop 来实现 Angular 2+ 中的拖放功能的方法。我们学习了该包的安装和模块引入方式，并通过示例代码演示了它的基本用法和部分高级用法。希望本文能够帮助读者更好地应用拖放功能。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/600673e2fb81d47349e53d96