AngularJS – 可拖动和多个连接的可排序（jQuery UI + angular-common）
我正在尝试扩展angular-common的优秀dragdrop模块 ，它可以处理连接到单个可排序的可拖动模块 。 （angular-common的dragdrop模块后面的原始SO线程就在这里 。）
我设法连接两个sortables，并为每个sortables删除一个draggable，并在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]); } }; }]) Droppable（可排序）指令：
.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.'); }); } }; }]);
控制器function：
$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; }); };
并且观点：
sortable
- {{ $index }}: {{ item.id }} - {{ item.name }}
sortable
- {{ $index }}: {{ item.id }} - {{ item.name }}
关于Plunker的工作示例。
任何帮助将不胜感激。
好的，我终于解决了。 我在GitHub上创建了一个fork ，并且更新了PLUNKER！
说明：关键是检查是否为另一个可排序列表设置了拖动对象的ui.sender 。 如果已设置，则该对象来自另一个可排序的，否则不是。
扩展的droppable（可排序）指令：
.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函数以处理多个sortables的多个数组（只是为了让demo完全运行）：
$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; }); } } };
并且观点：
sortable
- {{ $index }}: {{ item.id }} - {{ item.name }}
我删除了ngUpdate，据我所知，它没有任何实际function。