AngularJS - 可拖動和多個連接的排序（jQuery UI + angular-common）

Question

我試圖擴展angular-common的出色dragdrop module，它可以處理連接到單個可排序對象的可拖動對象。 （原來如此線程落後角常見的的DragDrop模塊爲here）。

我設法連接兩個sortables，和放拖動到他們每個人，以及sortables內重新安排工作的罰款（範圍項目陣列得到更新預期）。事實上，UI部分工作正常，但我似乎無法弄清楚如何在將列表項從一個可排序列表項拖動到另一個可排序列表項時如何更新Angular範圍中的項目數組。

工廠：

.factory('DragDropHandler', [function() { 
    return { 
     dragObject: undefined, 
     addObject: function(object, objects, to) { 
      objects.splice(to, 0, object); 
     }, 
     moveObject: function(objects, from, to) { 
      objects.splice(to, 0, objects.splice(from, 1)[0]); 
     } 
    }; 
}]) 

可投放（排序）指令：

.directive('droppable', ['DragDropHandler', function(DragDropHandler) { 
    return { 
     scope: { 
      droppable: '=', 
      ngUpdate: '&', 
      ngCreate: '&' 
     }, 
     link: function(scope, element, attrs){ 
      element.sortable({ 
       connectWith: ['.draggable','.sortable'], 
      }); 
      element.disableSelection(); 
      var list = element.attr('id'); 
      element.on("sortdeactivate", function(event, ui) { 

       var from = angular.element(ui.item).scope().$index; 
       var to = element.children().index(ui.item); 

       //console.log('from: ' + from + ', to: ' +to); 

       if (to >= 0){ 
        scope.$apply(function(){ 
         if (from >= 0) { 
          DragDropHandler.moveObject(scope.droppable, from, to, list); 
          scope.ngUpdate({ 
           from: from, 
           to: to, 
           list: list 
          }); 
         } else { 

          scope.ngCreate({ 
           object: DragDropHandler.dragObject, 
           to: to, 
           list: list 
          }); 

          ui.item.remove(); 
         } 
        }); 
       } 
      }); 

      element.on("sortremove", function(event, ui) { 
       //console.log(element); 
       //console.log('a sort item is removed from a connected list and is dragged into another.'); 
      }); 
      element.on("sortreceive", function(event, ui) { 
       //console.log(element); 
       //console.log('item from a connected sortable list has been dropped.'); 
      }); 
     } 
    }; 
}]); 

控制器功能：

$scope.updateObjects = function(from, to, list) { 
    var itemIds = _.pluck($scope.items[list], 'id'); 
    //console.log(itemIds); 
}; 

$scope.createObject = function(object, to, list) { 
    console.log(list); 
    console.log($scope.items[list]); 
    var newItem = angular.copy(object); 
    newItem.id = Math.ceil(Math.random() * 1000); 
    DragDropHandler.addObject(newItem, $scope.items[list], to); 
}; 

$scope.deleteItem = function(itemId) { 
    $scope.items = _.reject($scope.items, function(item) { 
     return item.id == itemId; 
    }); 
}; 

和視圖：

<h3>sortable</h3> 
<ul 
    droppable='items.list1' 
    ng-update='updateObjects(from, to)' 
    ng-create='createObject(object, to, list)' 
    id="list1" class="sortable"> 
    <li 
     class="ui-state-default" 
     ng-repeat="item in items.list1 track by item.id"> 
     {{ $index }}: {{ item.id }} - {{ item.name }} 
     <button 
      ng-click='deleteItem(item.id)' 
      class='btn btn-xs pull-right btn-danger'>X</button> 
    </li> 
</ul> 
<h3>sortable</h3> 
<ul 
    droppable='items.list2' 
    ng-update='updateObjects(from, to)' 
    ng-create='createObject(object, to, list)' 
    id="list2" class="sortable"> 
    <li 
     class="ui-state-default" 
     ng-repeat="item in items.list2 track by item.id"> 
     {{ $index }}: {{ item.id }} - {{ item.name }} 
     <button 
      ng-click='deleteItem(item.id)' 
      class='btn btn-xs pull-right btn-danger'>X</button> 
    </li> 
</ul> 

Working example on Plunker.

任何幫助將不勝感激。

Answer 1

好吧，我終於解決了它。我創建了一個fork on GitHub和PLUNKER UPDATED!

說明：關鍵是要檢查是否ui.sender被另一個排序列表設置拖動的對象。如果設置了，則該對象來自另一個可排序對象，否則不可以。

擴展可投放（排序）指令：

.directive('droppable', ['DragDropHandler', function(DragDropHandler) { 
    return { 
     scope: { 
      droppable: '=', 
      ngMove: '&', 
      ngCreate: '&' 
     }, 
     link: function(scope, element, attrs){ 
      element.sortable({ 
       connectWith: ['.draggable','.sortable'], 
      }); 
      element.disableSelection(); 
      var list = element.attr('id'); 
      element.on("sortupdate", function(event, ui) { 

       var from = angular.element(ui.item).scope().$index; 
       var to = element.children().index(ui.item); 

       if (to >= 0){ 
        //item is moved to this list 
        scope.$apply(function(){ 
         if (from >= 0) { 
          //item is coming from a sortable 

          if (!ui.sender) { 
          //item is coming from this sortable 
           DragDropHandler.moveObject(scope.droppable, from, to); 

          } else { 
          //item is coming from another sortable 
          scope.ngMove({ 
           from: from, 
           to: to, 
           fromList: ui.sender.attr('id'), 
           toList: list 
          }); 
          ui.item.remove(); 
          } 
         } else { 
          //item is coming from a draggable 
          scope.ngCreate({ 
           object: DragDropHandler.dragObject, 
           to: to, 
           list: list 
          }); 

          ui.item.remove(); 
         } 
        }); 
       } 
      }); 

     } 
    }; 
}]); 

在我添加了一個moveObject功能，它負責從舊陣列移動對象到新的控制器：

$scope.moveObject = function(from, to, fromList, toList) { 
    var item = $scope.items[fromList][from]; 
    DragDropHandler.addObject(item, $scope.items[toList], to); 
    $scope.items[fromList].splice(0, 1); 
} 

並且必須更新deleteItem函數以處理多個可排序列的多個陣列（僅用於保證演示完全正常工作）：

$scope.deleteItem = function(itemId) { 
    for (var list in $scope.items) { 
    if ($scope.items.hasOwnProperty(list)) { 
     $scope.items[list] = _.reject($scope.items[list], function(item) { 
     return item.id == itemId; 
     }); 
    } 
    } 
}; 

和視圖：

<h3>sortable</h3> 
<ul 
    droppable='items.list2' 
    ng-move='moveObject(from, to, fromList, toList)' 
    ng-create='createObject(object, to, list)' 
    id="list2" class="sortable"> 
    <li 
     class="ui-state-default" 
     ng-repeat="item in items.list2 track by item.id"> 
     {{ $index }}: {{ item.id }} - {{ item.name }} 
     <button 
      ng-click='deleteItem(item.id)' 
      class='btn btn-xs pull-right btn-danger'>X</button> 
    </li> 
</ul> 

我刪除ngUpdate，據我所知，它沒有任何實際功能。