How to create multiple elements drag and drop in angularjs - angularjs

Question

Anyone knows or can point me to an example in which multiple draggable elements are being dragged into a container ?
I need to achieve this behavior using Angular JS.
So far I've tried this : http://codef0rmer.github.io/angular-dragdrop/#/ but it only seems to work for 1 element at a time.
Thansk

Answer 1

That plugin you mentioned doesn't support multi drag&drop out of box.
Here is a working method to support multi drag&drop using the same plugin:
http://embed.plnkr.co/lyCnU3gNeGRrTk1D9hh0/
After you open the link, click on any area to get it to focus and detect your keyboard presses, then hit ctrl and click on the items you want to drag them to make them selected. Finally, drag them.
How it works:
<div class="container form-inline" style="text-align: center;">
<div class="btn btn-droppable" ng-repeat="item in list5" data-drop="true" ng-model='list5' data-jqyoui-options="{accept:'.btn-draggable:not([ng-model=list5])'}" jqyoui-droppable="{index: {{$index}}}">
<div class="btn btn-info btn-draggable"
ng-class="{'selected':(multiSelectedDataColumnsIndecies.indexOf($index) > -1)}"
data-html="true"
data-drag="true"
data-jqyoui-options="draggableOptionsList"
ng-model="list5"
jqyoui-draggable="{index: {{$index}},animate:false,placeholder: 'keep'}"
ng-click="dataItemClick($index,$event,item)">
{{item.title}}
</div>
</div>
</div>
.
$scope.draggableOptionsList = {
appendTo: 'body',
snap: true,
cursor: 'move',
revert: 'invalid',
helper: function() {
console.log('Im in helper');
var selected = $('.selected');
if (selected.length === 0) {
selected = $(this);
}
var container = $('<div/>').attr('id', 'draggingContainer');
container.append(selected.clone());
return container;
}
};
Using jquery UI's helper method, I select all selected items and return them to show dragging effect. And then on click, if ctrl is pressed I save the selected items in a gloabl list array.
<div class="row-fluid">
<ul class="thumbnails">
<li class="span3" style='margin:10px;width: 100%; '>
<div class="thumbnail"
data-drop="true"
ng-model='list1'
data-jqyoui-options
jqyoui-droppable="{onDrop:'dropCallback(list1,$index)',beforeDrop: 'beforeDrop(list1)', multiple:true}">
<div class="caption">
<div class="btn btn-info btn-draggable" ng-repeat="item in list1" ng-show="item.title" data-drag="{{item.drag}}" data-jqyoui-options="{revert: 'invalid'}" ng-model="list1" jqyoui-draggable="{index: {{$index}},animate:true}">{{item.title}}</div>
</div>
</div>
</li>
</ul>
</div>
.
$scope.beforeDrop = function(event, ui, dataModel) {
//In case of multi drop
for (var i = 0; i < $scope.multiSelectedDataColumnsForDrop.length; i++) {
var isExisting = false;
for (var j = 0; j < dataModel.length; j++) {
if (dataModel[j].title == $scope.multiSelectedDataColumnsForDrop[i].title) {
isExisting = true;
break;
}
}
if (!isExisting) {
dataModel.push(angular.copy($scope.multiSelectedDataColumnsForDrop[i]));
}
}
var deferred = $q.defer();
deferred.resolve();
return deferred.promise;
};
In beforeDrop method I select set the model value using the global list of selected items.

Answer 2

If you are talking about nested dropzones check out one of these:
http://marceljuenemann.github.io/angular-drag-and-drop-lists/ (HTML5)
https://github.com/JimLiu/angular-ui-tree (pure JavaScript)
If you just want to drop two elements into the container, then the library you mentioned also supports that, see this example:
http://codef0rmer.github.io/angular-dragdrop/#/list