angular-ui-sortable实现可拖拽排序列表
更新时间：2016年12月28日 09:20:38 作者：justforuse
这篇文章主要介绍了angular-ui-sortable实现可拖拽排序列表，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
项目需求，添加列表可拖拽排序功能，谷歌了一下，找到一个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() {
var resArr = [];
for (var i = 0; i < $scope.data.length; i++) {
resArr.push($scope.data[i].i);
}
console.log(resArr);
})
},
// 完成拖拽动作
stop: function(e, ui) {
//do nothing
}
}
})
</script>
html代码：
<body>
<div ng-controller="sortCtrl">
<ul ui-sortable="sortableOptions" ng-model="data">
<li ng-repeat="item in data ">
<span>{{item.name}}, {{item.age}}</span>
</li>
</ul>
</div>
</body>
效果：
我又另外添加了数据排序功能，不能直接使用orderBy筛选器，这样每次移动都会重新排序，需要使用orderByFilter和$watchCollection来实现效果，具体可查看地址：https://github.com/justforuse/Pro_Angular-demo/tree/master/draggable-list
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
下面小编就为大家带来一篇基于AngularJS的简单使用详解。小编觉得挺不错的，现在就想给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
AngularJS操作键值对象类似java的hashmap(填坑小结)
我们知道java的hashmap中使用最多的是put(...),get(...)以及remove()方法，那么在angularJS中如何创造（使用）这样一个对象呢？今天小编通过本文给大家分享下，感兴趣的朋友一起学习吧2016-11-11
本文主要介绍 AngularJS Service,这里整理了AngularJS Servic的详细资料,并提供代码实例,有需要的小伙伴可以参考下2016-07-07
Angular应用里环境变量SERVER_REQUEST_ORIGIN含义解析
这篇文章主要为大家介绍了Angular应用里环境变量SERVER_REQUEST_ORIGIN的含义解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-10-10
使用Angular9和TypeScript开发RPG游戏的方法
这篇文章主要介绍了使用Angular9和TypeScript开发RPG游戏的方法，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-03-03
详解如何在Angular应用中发起HTTP 302 redirect
这篇文章主要介绍了如何在Angular应用中发起HTTP 302 redirect详解，有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-12-12
本文主要Angular的MVC和作用域进行详细分析介绍，具有一定的参考价值，下面跟着小编一起来看下吧2016-12-12
本文主要介绍AngularJS过滤器，这里整理了详细的资料和提供了示例代码及实例效果图，有兴趣的小伙伴可以参考下2016-08-08
Angular.js通过自定义指令directive实现滑块滑动效果
这篇文章主要给大家介绍了关于Angular.js如何通过自定义指令directive实现滑块滑动的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用angularjs具有一定的参考学习价值，需要的朋友们下面来一起看看吧。2017-10-10
本篇文章主要介绍了详解AngularJS脏检查机制及$timeout的妙用，“脏检查”是Angular中的核心机制之一，它是实现双向绑定、MVVM模式的重要基础，有兴趣的可以了解一下2017-06-06
最新评论