ng2-dnd-update 是一个 Angular 2+ 的拖拽组件，可以帮助前端开发人员更加轻松地实现拖拽效果。本文将详细介绍如何使用 ng2-dnd-update，并提供示例代码，以方便读者学习和使用。
步骤一：安装 ng2-dnd-update
使用 ng2-dnd-update 需要先安装该 npm 包，在终端输入以下命令：
npm install ng2-dnd-update --save
以上命令将会安装 ng2-dnd-update 并将其添加到 package.json 文件中。
步骤二：导入 ng2-dnd-update
在使用 ng2-dnd-update 前，需要先在应用程序的模块中导入它。打开 app.module.ts 文件，在 imports 数组中导入 Ng2DndModule：
-- -------------------- ---- -------
------ - ------------ - ---- -----------------
---
-----------
------------- -
-------------
---
--
-------- -
--------------
------------
-----------------
------------- -- -- --------------
---
--
---------- ---
---------- --------------
--
------ ----- --------- - -步骤三：使用 ng2-dnd-update
要在一个组件中使用 ng2-dnd-update，需要先在 HTML 模板中添加 dnd-droppable 和 dnd-draggable 指令。比如在 app.component.html 文件中添加以下代码：
<h2>可排序的列表</h2>
<ul dnd-sortable-container [sortableData]="items">
<li *ngFor="let item of items" dnd-sortable [sortableIndex]="item.id">
{{ item.name }}
</li>
</ul>以上代码将创建一个可排序的列表，其中 dnd-sortable-container 指令表示这个容器是可排序的，sortableData 属性表示这个容器中的数据，dnd-sortable 指令表示这个元素可以被拖拽。
为了让这个元素可以拖拽，在 app.component.ts 中添加以下代码：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ -
----- - -
- --- -- ----- ----- -- --
- --- -- ----- ----- -- --
- --- -- ----- ----- -- --
- --- -- ----- ----- -- --
- --- -- ----- ----- -- --
--
-以上代码定义了一个 items 数组，表示这个列表中的数据。
结语
至此，我们已经完成了使用 ng2-dnd-update 实现拖拽效果的整个过程。这个过程可能有些繁琐，但使用 ng2-dnd-update 的好处是能够非常轻松地实现拖拽效果，而不需要编写大量的代码。对于前端开发人员来说，这些都是非常有帮助和指导意义的。
示例代码：
app.component.html
<h2>可排序的列表</h2>
<ul dnd-sortable-container [sortableData]="items">
<li *ngFor="let item of items" dnd-sortable [sortableIndex]="item.id">
{{ item.name }}
</li>
</ul>app.component.ts
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ -
----- - -
- --- -- ----- ----- -- --
- --- -- ----- ----- -- --
- --- -- ----- ----- -- --
- --- -- ----- ----- -- --
- --- -- ----- ----- -- --
--
-来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005581781e8991b448d53ca