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