angular-ui-sortable實現(xiàn)可拖拽排序列表
更新時間：2016年12月28日 09:20:38 作者：justforuse
這篇文章主要介紹了angular-ui-sortable實現(xiàn)可拖拽排序列表，具有一定的參考價值，感興趣的小伙伴們可以參考一下
項目需求，添加列表可拖拽排序功能，谷歌了一下，找到一個Angular的插件：angular-ui-sortable，項目地址：https://github.com/angular-ui/ui-sortable
需要在之前引入jquery，和jquery-ui，否則無法使用。
我們要做的事情，加載數(shù)據(jù)，拖拽排序并輸出當前順序：
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 = {
// 數(shù)據(jù)有變化
update: function(e, ui) {
console.log("update");
//需要使用延時方法，否則會輸出原始數(shù)據(jù)的順序，可能是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>
效果：
我又另外添加了數(shù)據(jù)排序功能，不能直接使用orderBy篩選器，這樣每次移動都會重新排序，需要使用orderByFilter和$watchCollection來實現(xiàn)效果，具體可查看地址：https://github.com/justforuse/Pro_Angular-demo/tree/master/draggable-list
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
下面小編就為大家?guī)硪黄贏ngularJS的簡單使用詳解。小編覺得挺不錯的，現(xiàn)在就想給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
AngularJS操作鍵值對象類似java的hashmap(填坑小結(jié))
我們知道java的hashmap中使用最多的是put(...),get(...)以及remove()方法，那么在angularJS中如何創(chuàng)造（使用）這樣一個對象呢？今天小編通過本文給大家分享下，感興趣的朋友一起學(xué)習(xí)吧2016-11-11
本文主要介紹 AngularJS Service,這里整理了AngularJS Servic的詳細資料,并提供代碼實例,有需要的小伙伴可以參考下2016-07-07
Angular應(yīng)用里環(huán)境變量SERVER_REQUEST_ORIGIN含義解析
這篇文章主要為大家介紹了Angular應(yīng)用里環(huán)境變量SERVER_REQUEST_ORIGIN的含義解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-10-10
使用Angular9和TypeScript開發(fā)RPG游戲的方法
這篇文章主要介紹了使用Angular9和TypeScript開發(fā)RPG游戲的方法，本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-03-03
詳解如何在Angular應(yīng)用中發(fā)起HTTP?302 redirect
這篇文章主要介紹了如何在Angular應(yīng)用中發(fā)起HTTP 302 redirect詳解，有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-12-12
本文主要Angular的MVC和作用域進行詳細分析介紹，具有一定的參考價值，下面跟著小編一起來看下吧2016-12-12
本文主要介紹AngularJS過濾器，這里整理了詳細的資料和提供了示例代碼及實例效果圖，有興趣的小伙伴可以參考下2016-08-08
Angular.js通過自定義指令directive實現(xiàn)滑塊滑動效果
這篇文章主要給大家介紹了關(guān)于Angular.js如何通過自定義指令directive實現(xiàn)滑塊滑動的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家學(xué)習(xí)或者使用angularjs具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起看看吧。2017-10-10
本篇文章主要介紹了詳解AngularJS臟檢查機制及$timeout的妙用，“臟檢查”是Angular中的核心機制之一，它是實現(xiàn)雙向綁定、MVVM模式的重要基礎(chǔ)，有興趣的可以了解一下2017-06-06