在 AngularJS 中，我们经常使用 ng-repeat 指令来动态渲染列表。为了提高用户体验，我们可能需要实现拖放排序功能，使用户可以通过拖拽来重新排列列表中的元素。
本文将介绍如何使用 ng-sortable 库来实现拖放排序的 ng-repeat 列表，并提供代码示例和指导意义。
安装与配置
首先，在页面中引入 ng-sortable 库：
------- -------------------------------------------------------------------------------------------
然后，在应用程序模块中注入 ng-sortable：
--- --- - ----------------------- -----------------
实现拖放排序
接下来，我们可以在 ng-repeat 中添加 as-sortable 指令来启用拖放排序功能：
--- ----------- -----------------
--- --------------- -- ------ -----------------
--------
------- ---------------------------------------------
-----
-----在上面的代码中，我们使用 as-sortable 指令来告诉 AngularJS 启用拖放排序功能，并使用 ng-model 指令来绑定数据源。ng-repeat 指令被放置在 li 元素中，表示需要渲染的列表项。我们还添加了一个移除按钮，以便用户可以从列表中删除元素。
最后，我们需要在控制器中实现 removeItem 函数来处理移除操作：
----------------- - --------------- - -------------------------- --- --
完整示例代码
下面是一个完整的示例代码，它演示了如何使用 ng-sortable 库来实现拖放排序的 ng-repeat 列表：
--------- -----
------
------
----------- --- ---- -------- ---------- -- -----------------
------- --------------------------------------------------------------------------------------
------- -------------------------------------------------------------------------------------------
-------
----- ---------------
---- -----------------------
--- ----------- -----------------
--- --------------- -- ------ -----------------
--------
------- ---------------------------------------------
-----
-----
------ -------------------
------- ---------------------------------
------
--------
--- --- - ----------------------- -----------------
------------------------ ---------------- -
------------ - ------ --- ----- --- ----- ----
----------------- - --------------- -
-------------------------- ---
--
-------------- - ---------- -
----------------------------------
-------------- - ---
--
---
---------
-------
-------结论与建议
使用 ng-sortable 库可以轻松地实现拖放排序功能，并且与 AngularJS 的 ng-repeat 指令非常兼容。但是，在实际使用中，我们需要注意一些细节，例如：
- 在拖动元素时，我们可能需要指定一个占位符来保持布局的稳定性。
- 在处理数据更新时，我们需要确保数据源和视图之间的同步。
最后，我们建议在实际项目中使用成熟的 UI 库，例如 Angular Material，以便获得更好的用户体验和可扩展性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/25284