分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow

也欢迎大家转载本篇文章。分享知识,造福人民,实现我们中华民族伟大复兴!

                     

项目需求,添加列表可拖拽排序功能,谷歌了一下,找到一个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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49

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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

效果:

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

我又另外添加了数据排序功能,不能直接使用orderBy筛选器,这样每次移动都会重新排序,需要使用orderByFilter和$watchCollection来实现效果,具体可查看地址:https://github.com/justforuse/Pro_Angular-demo/tree/master/draggable-list

           

给我老师的人工智能教程打call!http://blog.csdn.net/jiangjunshow

使用angular-ui-sortable实现可拖拽排序列表-LMLPHP
01-04 11:21