Reputation: 105
I use the angular-drag-and-drop-lists directives to handle drag and drop operations. I populate groups separated from the actual items. Problems occurs when I drag the item onto the ul element, item disappears. Here is a link to a plunker for you to be able to see what I mean.
Below is my code:
<ul ng-repeat="group in groups"
class="groups"
dnd-list="items">
<li class="title">{{group.name}}</li>
</ul>
<ul class="items">
<li class="item"
ng-repeat="item in items"
dnd-draggable="item"
dnd-moved="items.splice($index, 1)"
dnd-effect-allowed="move">
{{item.name}}
</li>
</ul>
Upvotes: 0
Views: 3493
Reputation: 16639
Well, the documentation says that you need to set a dnd-list on the target one and also you'll need to render that list yourself:
https://plnkr.co/edit/9OTy70KZZwavIWClIgvY?p=preview
<ul ng-repeat="group in groups" dnd-list="group.items" class="groups">
<li class="title">{{group.name}}</li>
<li ng-repeat="item in group.items">{{ item.name }}</li>
</ul>
and...
$scope.groups = [
{
name : 'Group 1',
items: []
},
{
name : 'Group 2',
items: []
},
{
name : 'Group 3',
items: []
}
];
Btw, I have to thank you for introducing me to this great library!
Upvotes: 2