简介
在前端中，拖拽操作不仅是一种常见的交互方式，更是提高用户体验的一种有效方法。Angular4-drag-drop就是一个能够帮助开发者快速实现拖拽功能的npm包，它可以让我们轻松地将元素进行拖拽和放置操作。
安装
使用npm安装angular4-drag-drop，只需在命令行中输入以下命令：
npm install angular4-drag-drop --save
安装成功后，你可以在你的项目中引入这个包。
使用
在使用angular4-drag-drop时，需要将dnd模块注入到你的应用程序中。打开你的app.module.ts文件，在NgModule装饰器中添加以下代码：
import { DndModule } from 'angular4-drag-drop';
@NgModule({
imports: [
DndModule.forRoot()
]
})指令
angular4-drag-drop提供了两个指令，分别是dnd-draggable和dnd-droppable。
dnd-draggable
dnd-draggable允许你将元素设置为可拖拽的。它有几个重要的属性：
- dnd-draggable: 指令的值，可以是任何类型的标识符。
- dnd-effect-allowed: 可选的属性，用于设置允许的拖拽效果的类型。值可以是move、copy或link。
- dnd-type: 可选的属性，用于设置拖拽元素的类型。可以是任何字符串。
以下是dnd-draggable的使用示例：
<div dnd-draggable [dnd-draggable]="item" [dnd-effect-allowed]="'move'" [dnd-type]="'task'">拖拽我</div>
注意：dnd-effect-allowed和dnd-type属性都是可选的，但要想获取最佳体验，建议使用。
dnd-droppable
dnd-droppable允许你将元素设置为可放置的。它有几个重要的属性：
- dnd-droppable: 指令的值，可以是任何类型的标识符。
- dnd-allow-drop: 可选的属性，用于阻止元素默认的拖拽效果。默认值是false。
- dnd-effect-allowed: 可选的属性，用于设置允许的拖拽效果的类型。值可以是move、copy或link。
- dnd-type: 可选的属性，用于设置拖拽元素的类型。可以是任何字符串。
以下是dnd-droppable的使用示例：
<div dnd-droppable [dnd-droppable]="true" (onDropSuccess)="onDropItem($event)">释放在这里</div>
注意：onDropSuccess属性是必须的，它定义了在元素被放置之后的回调函数。
事件
angular4-drag-drop提供了三个事件，用于处理元素拖拽的过程中的回调逻辑。
onDragStart
当元素开始拖拽时，onDragStart事件被触发。
以下是onDragStart事件的使用示例：
<div dnd-draggable [dnd-draggable]="item" (onDragStart)="dragStart($event)">拖拽我</div>
onDragOver
当元素正在被拖拽时，在它上面经过一段时间后，onDragOver事件会被触发，此时可以在事件中阻止默认行为。
以下是onDragOver事件的使用示例：
<div dnd-droppable [dnd-droppable]="true" (onDragOver)="dragOver($event)">释放在这里</div>
onDropSuccess
当元素被放置到某个区域时，onDropSuccess事件被触发，此时可以处理放置成功后的逻辑。
以下是onDropSuccess事件的使用示例：
<div dnd-droppable [dnd-droppable]="true" (onDropSuccess)="dropSuccess($event)">释放在这里</div>
示例代码
在这里我们提供一个完整的使用示例代码，让大家更好地了解angular4-drag-drop的使用方法：
-- -------------------- ---- -------
-----
------ ----------- -------------------
------- -------------------------------
------
----
--- ----------- ---- -- ----- -------------
----------------------
-----------------------------
-------------------
----------------------------------
--------
-----
-----
---- ------------- ---------------------- --------------------------------------
-----
-------- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------------
--------- ----------------
------------ -----------------------------
---------- -----------------------------
--
------ ----- ----------------- ---------- ------ -
----- -------
----- -------- - ------- ------ -------
------------- --
---------- --
--------- -
--------------------------
--------- - ---
-
------------ -
------------------- ---
-
-------------- -
------------------- ---
-
-总结
通过以上的讲解，相信大家已经掌握了angular4-drag-drop的基本用法。希望这篇文章对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005728681e8991b448e8bdc