在前端开发中，排序列表是一个非常常见的功能。为了轻松地实现这种功能，我们可以使用npm包angular-ui-sortable。该包提供了AngularJS指令来创建可排序的列表。本文将详细介绍如何使用这个npm包。
安装和导入
首先要安装这个npm包。在命令行中输入以下命令：
--- ------- -------------------
然后，在你的项目中，使用以下代码导入angular-ui-sortable指令：
----------------------- -----------------
使用方法
基本用法
在HTML中，我们可以使用ui-sortable指令来创建可排序的列表。例如，如果我们想要创建一个简单的可排序列表，我们可以这样写：
--- ----------- ----------------- --- --------------- -- --------- ---- ------- -----
这里，我们将ng-model属性设置为items，并在ng-repeat指令中使用它来循环遍历列表项。我们还将ui-sortable指令添加到<ul>元素中，以使其成为可排序列表。
配置选项
angular-ui-sortable还提供了一些配置选项，以便我们可以自定义可排序列表的外观和行为。下面是一些常用的配置选项：
axis: 限制拖动的方向。可以是x（水平）或y（垂直）。containment: 限制可排序列表的移动范围。cursor: 拖动时鼠标指针的样式。handle: 定义用于拖动元素的句柄。helper: 定义拖动时显示的辅助元素。placeholder: 定义拖动时占位符的样式。start: 当开始拖动元素时执行的回调函数。stop: 当停止拖动元素时执行的回调函数。
例如，如果我们想要将可排序列表的移动范围限制在父元素内部，并且将拖动时显示的辅助元素设置为半透明，我们可以这样写：
--- ----------- ---------------- --------------------- --------------- --- --------------- -- --------- ---- ------- -----
这里，我们使用了containment和helper选项来自定义可排序列表的行为。
自定义排序方法
还可以使用ui-sortable指令的sort属性来自定义排序方法。例如，如果我们想按数字大小而不是按字母顺序对列表进行排序，我们可以这样写：
--- ----------- ---------------- -------------------- --- --------------- -- --------- ---- ------- -----
然后，在我们的控制器中，我们可以定义sortByNumber方法来实现自定义排序：
------------------- - -------- --- -- - ------ - - -- --
这里，我们使用sort属性将sortByNumber方法指定为排序方法。
示例代码
下面是一个完整的示例，演示如何使用angular-ui-sortable创建可排序列表：
--------- -----
------
------
----- ----------------
--------------- ---- ------------
------- ------------------------------------------------------------------------------------
------- -------------------------------------------------------------------------------------------------
-------
-- -
----------- -----
-------- --
------- --
-
-- -
-------- ------
------ -----
-------- -----
- ----------------------------------------------------------- --------
---------------------------------------------------------------------------------------