我试图扩展angular-common优秀的dragdrop module，它可以处理连接到单个可排序的可拖动的here。 （angular-common＆gt;拖放模块后面的原始SO线程为Working example on Plunker.。）
我设法连接两个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（sortable）指令：
.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>
{{3}}
非常感谢任何帮助。
答案 0 :(得分：3)
好的，我终于解决了。我创建了fork on GitHub和 PLUNKER UPDATED!
说明：关键是检查是否为另一个可排序列表设置了拖动对象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的多个数组（只是为了让演示完全正常工作）：
$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，据我所知，它没有任何实际功能。