1. 简介
ngx-sortable-3 是一个 Angular 的拖放排序组件，用于对列表或表格元素进行排序操作。它可以与 Angular 的 FormsModule、ReactiveFormsModule 以及 NgxBootstrap 等模块一起使用。ngx-sortable-3 的底层实现基于 HTML5 的拖放 API，支持桌面端和移动端。
2. 安装
安装 ngx-sortable-3 的最新版本：
npm install ngx-sortable-3 --save
3. 使用
为了展示 ngx-sortable-3 的用法，我们将实现一个简单的列表应用。该应用包含一个可排序的列表和一个向列表中添加元素的表单。
3.1 组件 HTML
我们先定义一个 sortable-list 组件来渲染列表。该组件包括一个 ul 元素，它绑定到 list 变量，该变量是我们从父组件中传入的，并绑定到 ngx-sortable-list 指令。<li> 标签渲染了列表的每个元素，使用 *ngFor 循环遍历 list 数组。
<ul ngx-sortable-list="list" class="list-group">
<li *ngFor="let item of list" class="list-group-item">
{{ item }}
</li>
</ul>接下来，我们定义一个表单组件来添加新元素到列表中。
3.2 表单 HTML
下面是包含一个 input 元素和一个按钮的表单组件。点击按钮后，我们会触发一个 addToList 方法，将表单中的值添加到列表中。值从 itemName 变量中获取，这个变量我们将使用双向数据绑定，从而与输入框保持同步。
<div class="form-group"> <label for="itemName">新元素</label> <input type="text" [(ngModel)]="itemName" class="form-control" id="itemName" name="itemName"> </div> <button (click)="addToList()" class="btn btn-primary">添加到列表</button>
现在，我们将组件 sortable-list 和 add-item 组合在一起，实现最终的列表应用。
3.3 组合组件
下面是父组件 HTML。我们使用 sortable-list 组件作为 app.component 的一部分，并将 list 变量传递给该组件。add-item 组件实现填写表单的部分。
<div class="container"> <h1>ngx-sortable-3 示例</h1> <app-add-item (addItem)="addItem($event)"></app-add-item> <app-sortable-list [list]="list"></app-sortable-list> </div>
同时，我们需要在 app.component 中实现一些逻辑代码。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
--------- -
---- ------------------
------------------ -------
------------- -------------------------------------------
------------------ ----------------------------------
------
-
--
------ ----- ------------ -
----- ------------- - ------- ------ -------
-------- - ---
------------- -------- ---- -
---------------------
------------- - ---
-
-4. 示例代码
下面是完整的 sortable-list 和 add-item 组件的 TypeScript 代码。
-- -------------------- ---- -------
------ - ---------- ------ ------- ------------ - ---- ----------------
------------
--------- --------------------
--------- -
--- ------------------------ -------------------
--- ----------- ---- -- ----- ------------------------
-- ---- --
-----
-----
-
--
------ ----- --------------------- -
-------- ----- --------------
-
------------
--------- ---------------
--------- -
---- -------------------
------ --------------------------
------ ----------- ---------------------- -------------------- ------------- ----------------
------
------- --------------------- ---------- ---------------------------
-
--
------ ----- ---------------- -
--------- -------- -------------------- - --- -----------------------
-------- - ---
------------ ---- -
-- ---------------------------- --- -- -
-------
-
---------------------------------
------------- - ---
-
-5. 总结
我们使用 ngx-sortable-3 移植了一个简单的拖放排序应用程序，并执行了以下操作：
- 安装和导入 ngx-sortable-3
- 定义一个列表组件和一个表单组件
- 应用双向数据绑定来保持表单和变量同步
- 用父组件将两个组件组合在一起
ngx-sortable-3 提供了一种简单而强大的方式来实现拖动排序功能，可以很容易地用于 Angular 应用程序的开发中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600673e2fb81d47349e53db8