Автоматическая регулировка с помощью Углового перетаскивания

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> 

Может кто-то помочь мне с такой же, как мне нужно, чтобы понять детали того, где я неправильно.

Спасибо, Ray

Answer 1

Если вам нужно сброшенные элементы в списке должны быть отсортированы после падения, а затем использовать orderBy фильтр с ng-repeat в списке. В основном вы выбираете свойство объекта, которое хотите сортировать (в вашем случае title). Пример одного из списков:

ng-repeat="item in list1 | orderBy : 'title'" 

Это сортирует повторный список по item.title. Я обновил вашу прикрепленную скрипку, чтобы показать эту работу here.