Question

我正在尝试根据以下内容重新设置拖放角度 - http://plnkr.co/edit/KgDKZSXNBQitLrtT1xpM

但我得到的区别是当我删除任何列表项时，那些不是自动安排的。

我的代码 -

<div ng-controller="projectRayController">
            <div class="panel panel-default">
                <div class="panel-body container-fluid">
                    <div class="row-fluid">
                        <div class="col-sm-2" id="sidebar-wrapper">
                            <ul class="list-group">
                                <a id="toggle-menu">
                                <li class="list-group-item">Toggle Menu</li>
                                </a>
                                <li class="list-group-item">Create Project</li>
                            </ul>
                        </div>
                        <div class="col-sm-10">
                            <div id="progress-board">
                                <div class="row-fluid">
                                        <div class="col-md-3 task-column">
                                            <div style="border:1px solid black; height:200px;" data-drop="true" ng-model="list1" jqyoui-droppable="{multiple:true}">
                                                <div class="btn btn-info btn-draggable" ng-repeat="item in list1" ng-model="list1" ng-show="item.title" data-drag="{{item.drag}}" data-jqyoui-options="{revert: 'invalid'}" jqyoui-draggable="{index: {{$index}},animate:true}">
                                                <script type="text/javascript">alert('hi');</script>
                                                {{item.title}}</div>
                                            </div>
                                        </div>
                                        <div class="col-md-3 task-column">
                                            <div data-drop="true" ng-model="list2" jqyoui-droppable="{multiple:true}">
                                                Drop here 2
                                            </div>
                                        </div>
                                        <div class="col-md-3 task-column">
                                            <div data-drop="true" ng-model="list3" jqyoui-droppable="{multiple:true}">
                                                Drop here 3
                                            </div>
                                        </div>
                                        <div class="col-md-3 task-column">
                                            <div data-drop="true" ng-model="list4" jqyoui-droppable="{multiple:true}">
                                                Drop here 4
                                            </div>
                                        </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div>
                        <div class="btn btn-droppable" ng-repeat="item in list5" data-drop="true" ng-model='list5' >
                            <div data-jqyoui-options="{revert: 'invalid'}" class="btn btn-info btn-draggable" data-drag="true" jqyoui-draggable="{index: {{$index}},placeholder:true,animate:true}" ng-hide="!item.title" ng-model="list5">{{item.title}}
                            </div>
                    </div>
                    </div>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            angular.module('projectRayApp', ['ngDragDrop']).controller('projectRayController', function($scope, $http, $q) {
                $scope.list1 = [];
                $scope.list2 = [];
                $scope.list3 = [];
                $scope.list4 = [];

                $scope.list5 = [
                    { 'title': 'Item 1', 'drag': true },
                    { 'title': 'Item 2', 'drag': true },
                    { 'title': 'Item 3', 'drag': true },
                    { 'title': 'Item 4', 'drag': true },
                    { 'title': 'Item 5', 'drag': true },
                    { 'title': 'Item 6', 'drag': true },
                    { 'title': 'Item 7', 'drag': true },
                    { 'title': 'Item 8', 'drag': true }
                ];
            });

            $('#toggle-menu').click(function(e) {

                console.log('clicked');
                $('#sidebar-wrapper').toggleClass('toggled');

            });
        </script>

有人可以帮助我，因为我需要了解我出错的地方的细节。

谢谢，射线

Answer 1

如果您需要在放弃后对列表中的已删除项目进行排序，请使用列表中orderBy的{{1}}过滤器。基本上，您选择要排序的项属性（在您的情况下为ng-repeat）。其中一个列表的示例：

title

这将按ng-repeat="item in list1 | orderBy : 'title'"对重复列表进行排序。我已经更新了您的小提示，以显示此工作here。

使用Angular拖放自动调整

1 个答案: