本文介绍 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 事件中我们会得到这个元素的唯一标识符，用于在后续操作中标识该元素，示例代码如下：
-- -------------------- ---- ------- ---- ----------------- -------- -------------------- --------------------------------- ----------------------------- - -- --------- -- ------
-- -------------------- ---- ------- ----- - -- --- -- ----- ----- -- -- - --- -- ----- ----- -- --- ---------------- ---- - ----------------- --------- ------- - -------------- ---- - ----------------- ------- ------- -
然后对于可放置元素的区域，我们绑定 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 等，在事件回调中添加自定义样式或其他操作，示例代码如下：
-- -------------------- ---- ------- ---- ----------------- -------- -------------------- --------------------------------- ----------------------------- - -- --------- -- ------
-- -------------------- ---- ------- ---------------- ---- - ----------------- --------- ------- - -------------- ---------------- ---- - ----------------- --------- ------- - --------------- ---- - ----------------- ------ ------- - ---------------- ---- - ----------------- ------ ------- -
自定义拖放图标
我们可以在元素的 dragStart 事件中手动设置自定义拖放图标，示例代码如下：
-- -------------------- ---- ------- ---- ----------------- -------- -------------------- --------------------------------- ----------------------------- - -- --------- -- ------
dragStart(event: any) {
event.dataTransfer.setDragImage(event.target, 100, 100);
}暂停和恢复拖放
我们可以通过 dragEnabled 属性来临时禁用拖放功能，然后再通过 enableDrag() 和 disableDrag() 方法来启用或禁用拖放功能，示例代码如下：
-- -------------------- ---- ------- ---- ----------------- -------- --------------------------- --------------------------- -------------------- --------------------------------- ----------------------------- - -- --------- -- ------
-- -------------------- ---- -------
-------- - ------
----------- - -----
-------- -
------------- - ---------------
-- --------------- -
-------------------
- ---- -
------------------
-
-
------------- -
---------------- - ------
-
------------ -
---------------- - -----
-小结
这篇文章介绍了使用 npm 包 ang-drag-drop 来实现 Angular 2+ 中的拖放功能的方法。我们学习了该包的安装和模块引入方式，并通过示例代码演示了它的基本用法和部分高级用法。希望本文能够帮助读者更好地应用拖放功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600673e2fb81d47349e53d96