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)文章
AngularJS操作鍵值對象類似java的hashmap(填坑小結(jié))
我們知道java的hashmap中使用最多的是put(...),get(...)以及remove()方法,那么在angularJS中如何創(chuàng)造(使用)這樣一個對象呢?今天小編通過本文給大家分享下,感興趣的朋友一起學(xué)習(xí)吧2016-11-11Angular應(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-12Angular.js通過自定義指令directive實現(xiàn)滑塊滑動效果
這篇文章主要給大家介紹了關(guān)于Angular.js如何通過自定義指令directive實現(xiàn)滑塊滑動的相關(guān)資料,文中通過示例代碼介紹的非常詳細,對大家學(xué)習(xí)或者使用angularjs具有一定的參考學(xué)習(xí)價值,需要的朋友們下面來一起看看吧。2017-10-10