Question

我有一个挂钩可排序的AngularJS指令。

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

可排序指令：

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组件，可以对嵌套列表进行排序并绑定数据，它不需要依赖于jQuery。

Answer 2

我能够提出一个使用jQueryUI可排序的解决方案，可以挂钩到draggable和droppable。 Full details here

AngularJS嵌套的jQuery UI Sortables with Recursion

2 个答案: