eckiges Ziehen-und-Ablegen-listet Objekte in einem separaten Container auf

Question

Ich verwende die angular-drag-and-drop-lists Direktiven, um Drag & Drop-Operationen zu handhaben. Ich bevölkere Gruppen, die von den tatsächlichen Elementen getrennt sind. Probleme treten auf, wenn ich das Element auf das ul-Element ziehe, verschwindet das Element. Here ist eine Verbindung zu einem Plunker für Sie in der Lage zu sehen, was ich meine.

Unten ist mein 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> 

Answer 1

Nun, sagt die Dokumentation, dass auf einen Blick eine DND-Liste auf dem Ziel festlegen müssen, und Sie werden auch selbst machen müssen, dass Liste:

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> 

und ...

$scope.groups = [ 
    { 
     name : 'Group 1', 
     items: [] 
    }, 
    { 
     name : 'Group 2', 
     items: [] 
    }, 
    { 
     name : 'Group 3', 
     items: [] 
    } 
]; 

Btw, ich muss Ihnen danken, dass Sie mich in diese großartige Bibliothek eingeführt haben!