【关于拖动排序 _其他插件】

关于拖动排序

我也踩过这个坑( 1 )

已统计您的踩坑,无需重复点击

回答(0)

其他插件

详细描述

截图

代码

<div ng-controller="appCtrl">
    <ul ui-sortable="sortableOptions" ng-model="data">
        <li ng-repeat="item in data ">
            <span>{{$index+1}}, {{item.name}}, {{item.age}}</span>
        </li>
    </ul>
</div>

angular.module("myApp", ["ui.sortable"])
    .controller("appCtrl", 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
            }
        }
    });

编辑于2024-11-23