简介
@loudandwicked/ng2-dnd 是一个基于 Angular 2+ 平台开发的拖放(Drag and Drop)模块。通过它，可以快速实现拖放界面元素的交互效果。该模块支持嵌套和排序，并且使用方便。
安装
npm install @loudandwicked/ng2-dnd
使用
1. 引入模块
在需要使用的组件中引入 DndModule 模块。
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - --------- - ---- ------------------------- ----------- -------- ------------ ------------- -------------- -------- ------------- -- ------ ----- -------- - -
2. 配置拖动行为
在需要进行拖动的元素上，使用 dnd-draggable 指令指示该元素是可拖动的。例如，在一个列表中，每个列表项都是可拖动的。
<ul>
<li *ngFor="let item of items" dnd-draggable [dragEnabled]="true">
{{item.name}}
</li>
</ul>还可以通过配置 dnd-type 属性来定义拖动元素的类型。
<li *ngFor="let item of items" dnd-draggable [dragEnabled]="true" [dndType]="'item'">
{{item.name}}
</li>3. 配置释放行为
在可以放置拖动元素的区域中，使用 dnd-droppable 指令指示该区域是可放置的。例如，在一个列表中，每个列表项都是可放置的，并且在放置操作完成后会触发拖动元素的 drop 事件。
<ul>
<li *ngFor="let item of items" dnd-draggable [dragEnabled]="true" [dndType]="'item'">
{{item.name}}
</li>
<li dnd-droppable (onDropSuccess)="onDropSuccess($event)">
Drop zone
</li>
</ul>4. 实现拖动事件处理
当拖动元素被放置到放置区域时，会触发 onDropSuccess 回调函数。在该函数中，可以实现拖放操作的业务逻辑，例如交换列表项的位置。
onDropSuccess(event: DragEvent) {
// event.dragData 是被拖动元素的数据
// event.target 是拖放目标元素
}5. 配置其他行为
可以通过配置更多的 dnd- 属性来控制拖放行为，例如 dnd-dragover、dnd-dragend、dnd-disable-if 等。具体用法请参考官方文档。
示例代码
<ul>
<li *ngFor="let item of items" dnd-draggable [dragEnabled]="true" [dndType]="'item'">
{{item.name}}
</li>
<li dnd-droppable (onDropSuccess)="onDropSuccess($event)">
Drop zone
</li>
</ul>-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- ---------------
--------- -----
--- ----------- ---- -- ------ ------------- -------------------- -------------------
-------------
-----
--- ------------- ----------------------------------------
---- ----
-----
------
--
------ ----- ----------- -
------ ----- - -
- ----- ----- -- --
- ----- ----- -- --
- ----- ----- -- --
--
-------------------- ---------- -
-- -------------- ---------
-- ------------ -------
----------------------------
-
-深度和学习意义
拖放是 Web 应用中非常常见的一种交互方式。使用 @loudandwicked/ng2-dnd 模块可以快速实现该功能，并且支持嵌套和排序。通过深入研究其源代码，可以了解到 Angular 2+ 中的指令和事件机制。同时，也可以提高学习 TypeScript 和 Angular 的能力，有助于更好地开发现代 Web 应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bc9967216659e244618