angular-drag-and-drop-lists items in separate container

Question

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>

coma coma · Accepted Answer · 2016-03-23T09:16:27

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!

angular-drag-and-drop-lists items in separate container

1 Answers