使用angular-ui-sortable实现可拖拽排序列表

最新推荐文章于 2025-06-25 09:24:09 发布

justforuse

最新推荐文章于 2025-06-25 09:24:09 发布

阅读量1.6w

点赞数 4

CC 4.0 BY-SA版权

分类专栏： AngularJS 文章标签： angular 拖拽排序列表 angular-ui

本文链接：https://blog.youkuaiyun.com/u014291497/article/details/52801032

本文介绍如何利用angular-ui-sortable插件在Angular项目中实现列表的拖拽排序功能。需要引入jquery和jquery-ui作为依赖。示例代码展示了加载数据、拖拽排序并实时更新顺序的方法。此外，还提到了数据排序的处理方式，以及插件禁用状态的切换方法，并提供了在线示例链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目需求，添加列表可拖拽排序功能，谷歌了一下，找到一个Angular的插件：angular-ui-sortable，项目地址：https://github.com/angular-ui/ui-sortable

需要在之前引入jquery，和jquery-ui，否则无法使用。

我们要做的事情，加载数据，拖拽排序并输出当前顺序：

js代码：

<script src="../../jquery.js"></script>
<script src="../../jquery-ui.js"></script>
<script src="../../angular.js"></script>
<script src="ui-sortable/src/sortable.js"></script>
<script>
	angular.module("app", ["ui.sortable"])
		.controller("sortCtrl", function($scope, $timeout) {
			$scope.cannotSort = false;
			$scope.data = [{
				"name": "allen",
				"age": 21,
				"i": 0
			}, {
				"name": "bob",
				"age": 18,
				"i": 1
			}, {
				"name": "curry",
				"age": 25,
				"i": 2
			}, {
				"name": "david",
				"age": 30,
				"i": 3
			}];

			$scope.sortableOptions = {
				// 数据有变化
				update: function(e, ui) {
					console.log("update");
					//需要使用延时方法，否则会输出原始数据的顺序，可能是BUG？
					$timeout(function() {