2016-03-23 10 views
0

私はangular-drag-and-drop-listsディレクティブを使用してドラッグアンドドロップ操作を処理します。私は実際のアイテムから分離したグループを設定します。アイテムをul要素にドラッグすると問題が発生し、アイテムが消えます。 Hereは、あなたが私の言いたいことを見ることができるようにするプランナーへのリンクです。以下は角度ドラッグ&ドロップで別のコンテナにアイテムを表示する

私のコードです:

<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> 

答えて

2

まあ、ドキュメントでは、ターゲット1にDND-リストを設定し、また、あなたがそのリストを自分でレンダリングする必要があります必要があると述べている:

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> 

と...

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

Btw、私はこの素晴らしい図書館に私を紹介してくれてありがとう!

+0

これは実際には、答えのおかげです!私は(なぜなら)グループが他のリストからアイテムを "受け取る"ことができるようにするために、それらが空であるにもかかわらずアイテムを持っていなければならない理由は分かりません。とにかく、もう一度ありがとう。 – janhocevar

関連する問題