AngularJS - 拖动和多个连接sortables（jQuery用户界面+角常见） [英] AngularJS - draggable and multiple connected sortables (jQuery UI + angular-common)
问题描述
我试图延长角共同的出色的的DragDrop模块它可以处理一个可拖动连接到单个排序。的（原来如此线程落后角常见的的DragDrop模块是<一个href=\"http://stackoverflow.com/questions/18835619/drag-object-into-sortable-list-angularjs\">here.)
I'm trying to extend angular-common's excellent dragdrop module which can handle a draggable connected to a single sortable. (Original SO thread behind angular-common's dragdrop module is here.)
我设法连接两个sortables，拖放一个可拖动的每一个人，并sortables内重新安排工作的罚款（范围项阵列得到更新预期）。事实上，UI部分工作正常，但我似乎无法弄清楚如何更新项目阵列中的角范围内，当我从一个排序到另一个拖动列表项。
I managed to connect two sortables, and dropping a draggable to each of them, and rearranging within the sortables work fine (scope item arrays get updated as expected). In fact the UI part works fine, but I can't seem figure out how to update the item arrays in the Angular scope when I drag a list item from one sortable to another.
厂址：
.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:
.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>
任何帮助将大大AP preciated。
Any help would be greatly appreciated.
推荐答案
好吧，我终于解决了这个问题。我创建了GitHub上一个叉，和 PLUNKER UPDATED！
Ok, I finally solved it. I created a fork on GitHub, and PLUNKER UPDATED!
说明：关键是要检查 ui.sender 被设置为另一排序列表中拖动的对象。如果它被设置，对象是从另一个排序来了，否则不是。的
Explanation: The key was to check if ui.sender was set for the dragged object by another sortable list. If it was set, the object was coming from another sortable, otherwise not.
扩展投掷的（排序）指令：
The extended droppable (sortable) directive:
.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功能，它负责从旧阵列移动对象到新的控制器：
In the controller I added a moveObject function that is responsible for moving the object from the old array to the new one:
$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（只是为了演示完全正常工作）的多个阵列：
And the deleteItem function had to be updated to handle multiple arrays of the multiple sortables (just to keep the demo fully working):
$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，据我所知，它没有任何实际功能。
I removed ngUpdate, as far as I could tell, it didn't have any actual functionality.
这篇关于AngularJS - 拖动和多个连接sortables（jQuery用户界面+角常见）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
