什么是 ngx-dnd-style
ngx-dnd-style 是一个 Angular 插件，提供了一套拖放样式组件，可用于简化在应用程序中实现拖放交互的过程。此包包括两个独立的模块：
- dnd-style：提供了基本的拖放样式组件。
- dnd-draggable：提供了可拖动行为的样式组件。
如何使用 ngx-dnd-style
安装
使用 npm 安装 ngx-dnd-style：
npm install ngx-dnd-style --save
导入
要使用 ngx-dnd-style，必须将它们添加到应用程序模块的导入中：
-- -------------------- ---- -------
------ - --------------- ------------------ - ---- ----------------
-----------
-------- -
-- ---
---------------
------------------
--
-- ---
--
------ ----- --------- - -使用样式组件
在应用程序中使用 ngx-dnd-style 的样式组件非常简单。只需在组件模板中引用它们，并像使用其他 Angular 组件一样绑定数据。例如：
<dnd-style-container>
<dnd-style-element *ngFor="let item of todoItems" dnd-draggable [dragData]="item">{{item}}</dnd-style-element>
</dnd-style-container>在上面的代码中，我们定义了一个 dnd-style-container 和 dnd-style-element 元素，这些元素提供了基本的拖放样式。dnd-style-element 元素使用 dnd-draggable 指令提供了可拖动行为。
拖放交互
我们可以使用 ngx-dnd-style 的拖放交互来实现复杂的拖放操作。例如，我们可以在 dnd-style-element 元素上监听 dnd-drop-success 事件，该事件会在元素成功放置时触发。例如：
<dnd-style-container>
<dnd-style-element *ngFor="let item of todoItems" dnd-draggable [dragData]="item">{{item}}</dnd-style-element>
<dnd-style-element (dnd-drop-success)="onDropSuccess($event)" dnd-droppable>
Dropzone
</dnd-style-element>
</dnd-style-container>在上面的代码中，我们定义了一个可放置的 dnd-style-element 元素，并在它上面监听了 dnd-drop-success 事件。在该事件的处理程序中，我们可以读取放置的数据并执行必要的操作。例如：
onDropSuccess(event: DndDropEvent) {
console.log("Item being dropped", event.dragData);
}完整示例
下面是一个完整的示例，演示如何使用 ngx-dnd-style 实现拖放列表：
<dnd-style-container>
<dnd-style-element *ngFor="let item of todoItems" dnd-draggable [dragData]="item">{{item}}</dnd-style-element>
<dnd-style-element (dnd-drop-success)="onDropSuccess($event)" dnd-droppable>
Dropzone
</dnd-style-element>
</dnd-style-container>-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------ - ---- ----------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ -
------ --------- - -
---- ------ ----- --- ----- --- --------- ----- -------
--
-------------------- ------------- -
----------------- ----- --------- ----------------
-
-总结
ngx-dnd-style 是一个极其有用的 Angular 插件，可用于简化在应用程序中实现拖放交互的过程。它提供了一套完整的拖放样式组件，可以使 UI 开发更加高效。我们希望这篇文章对你有所帮助，让你能够更快地掌握使用 ngx-dnd-style 的技巧。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067355890c4f7277583af3