javascript - AngularJS 嵌套 jQuery UI 可排序与递归

Question

我有一个连接排序的 AngularJS 指令。

我正在尝试创建一个指令，允许我将新项目拖放到可排序中。如果该项目是一个“部分”，它应该允许进一步递归地拖放到其中。该部分本身初始化一个可排序项，我尝试连接可排序项。问题是它永远不会连接...我已经用 jqueryUI 单独构建了类似的演示，所以我知道它是可能的，我的 Angular 实现可能只是搞砸了一些东西。有什么想法吗？

可排序指令:

app.constant('sortableConfig', {
    connectWith: '.sortables'
});

app.directive('sortable', ['$timeout','sortableConfig', function ($timeout, sortableConfig) {
    return {
        restrict: 'AE',
        scope: {
            ngModel: '=',
            options: '='
        },
        link: function ($scope, $element, $attributes) {
            var ngModel = $scope.ngModel;

            var options = angular.extend(sortableConfig, 
                    $scope.$eval($attributes.options)),
                sortableIn = 0;

            console.log(ngModel)

            options.start = function(e, ui) {
                // Save position of dragged item
                ui.item.sortable = { index: ui.item.index() };
            };

            options.update = function(e, ui) {
                // For some reason the reference to ngModel in stop() is wrong
                ui.item.sortable.resort = ngModel;
            };

            options.receive = function(e, ui) {
                sortableIn = 1;
                ui.item.sortable.relocate = true;
                // added item to array into correct position and set up flag
                ngModel.splice(ui.item.index(), 0, ui.item.sortable.moved);
            };

            options.remove = function(e, ui) {
                // copy data into item
                if (ngModel.length === 1) {
                    ui.item.sortable.moved = ngModel.splice(0, 1)[0];
                } else {
                    ui.item.sortable.moved =  ngModel.splice(ui.item.sortable.index, 1)[0];
                }
            };

            options.over = function(e, ui) {
                sortableIn = 1;
            };

            options.out = function(e, ui) {
                sortableIn = 0;
            };

            options.beforeStop = function(e, ui) {
                // http://snipplr.com/view/49923/
                if (sortableIn == 0) { 
                    console.log('REMOVE!', ui.item.sortable.resort)
                    //ui.item.remove(); 
                    //ngModel.splice(ui.item.index(), 1);
                }
            };

            options.stop = function(e, ui) {
                // digest all prepared changes
                if (ui.item.sortable.resort && !ui.item.sortable.relocate) {
                    // Fetch saved and current position of dropped element
                    var end, start;
                    start = ui.item.sortable.index;
                    end = ui.item.index();

                    // Reorder array and apply change to scope
                    ui.item.sortable.resort.splice(
                        end, 0, ui.item.sortable.resort.splice(start, 1)[0]);
                }
            };

            $timeout(function(){
                console.log(options)
                $element.sortable(options);
            })
        }
    }
}]);

可排序模板:

 <ul sortable class="sortable" ng-model="ngModel">
<li class="pull-left" ng-repeat="item in ngModel" ng-model="item" ng-style="drawLayout(item)">
    <div ng-if="isField(item)"
         class="btn btn-info btn-draggable layout-field"
         ng-click="showDetails(item)">{{item.name}}</div>

    <div droppable 
         ng-model="item.children"
         dropped="layoutDropped(dragModel, dropModel)" 
         ng-if="item.typeOf == 'section'"
         class="panel panel-default layout-section">

        <div class="panel-heading" ng-click="showDetails(item)">
            {{item.name}}
            <div ng-show="item.helpTextOpt != 'none'">
                <hr />
                <p>{{item.helpText}}</p>
            </div>
        </div>
        <div class="panel-body" onload="ngModel=item.children"
             ng-include="'views/app-builder/layout.html'">
        </div>
    </div>
</li>

Answer 1

可以引用 Angular-NestedSortable( https://github.com/JimLiu/Angular-NestedSortable ) 的代码。一个 Angularjs ui 组件，可以对嵌套列表进行排序和绑定(bind)数据，并且不需要依赖于 jQuery。