Ngx-dnd 是一个 Angular 应用中常用的拖放库，它提供了各种拖放和排序功能，操作简单易用。本教程将深入介绍该库的使用方法。
安装
在开始使用之前，我们需要先安装 @swimlane/ngx-dnd 依赖包，可以通过以下命令进行安装：
--- ------- ----------------- ------
这条命令会从 npm 仓库中下载 ngx-dnd，然后将其安装到您的项目中。
引入
在您的 Angular 项目中，您需要在需要使用库的模块中引入 DndModule，以限定这个模块可以使用 ngx-dnd 模块的函数和组件：
------ ---------- ---- ----------------
------ --------------- ---- ----------------------------
------ ----------- ---- --------------------
------ -------------- ---- --------
-----------
------------- -
------------
--
-------- -
--------------
-------------------
--
---------- --------------
--
------ ----- --------- --
使用
在模块放置完毕后，我们开始使用 ngx-dnd。 例如，您可能需要使用 Draggable 组件去实现拖动某个对象：
---- ------------- ----------------- --------------------- ------------- ------
或者，您可以在列表项目之间实现排序：
--- ------------ ------------------------- --- ----------- ---- -- ------------------------- -----
示例代码
以下示例展示了使用 ngx-dnd 实现的一个拖放列表视图。在这个示例中，我们使用 Draggable 和 Droppable 组件来拖动和放置列表：
--------- ----- ---------
---- ------------- ---------------------- ----------------------------------------
----
--- ----------- ---- -- ------ ------------- -------------------- ------------------------------------
-----
------
---- ------------------------ ------------- ----------------------------------------
---------- --------------
------------ - --------- - ---- ----------------
------ - ------------ - ---- --------------------
------------
--------- --------------
--------- ------------------------
--
------ ----- ---------------- -
----- - -
- --- -- ----- ---------- --
- --- -- ----- -------- --
- --- -- ----- ------- ------ --
- --- -- ----- ------------ --
- --- -- ----- ----- ---- --
--
-------------------- ------------- -
-------------------
----- ---- - -----------
-- -- --------- ---- --- ---- ---- --- ---- -------
-
-在以上示例代码中，我们创建了两个不同的容器 —— 一个列表和一个目标容器。我们使用 ngFor 指令和 * 操作符来对列表进行循环遍历。
在 DndDrop 属性的背景下，我们使列表项可“拖动”并将其“放置”在另一个容器中，通过使用 dndDraggable 和 dndDroppable 指令实现。
我们还为容器绑定了一个 onDropSuccess 事件函数，以在 “拖放” 完成时触发后续操作。
结论
使用 ngx-dnd 库可以轻松地实现各种拖放和排序功能。通过本教程，您可以了解到如何：
- 安装和引入
ngx-dnd文件 - 使用
Draggable和Droppable组件进行拖放和排序操作 - 自定义
ngx-dnd库元素的DragData和DropData
如需更详细的内容，请参阅 ngx-dnd 文档和示例代码。
参考链接
ngx-dnd Github：https://github.com/swimlane/ngx-dnd
ngx-dnd 官方文档：https://swimlane.gitbook.io/ngx-dnd/
同时，我们可以在 GitHub 上的 ngx-dnd 仓库里找到更详细的文档，其中包括所有可用组件的完整规格。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/swimlane-ngx-dnd