角度jsドラッグアンドドロップ

Question

ドラッグアンドドロップ機能を次の構造にしたいと思います。

私は上記の構造をドラッグ可能にするためにライブラリを使用してthisを使用しています。 しかしそれには一定の条件があります。

• メインペアレントはドラッグできません。
• メインペアレントには、任意の数の子を持つことができます。
• 子供は任意の数のアイテムを持つことができます。

Lets take Child 4.1。 Item1はadminタイプで、Item2とItem3はタイプユーザーであるとします。 子は1人の管理者しか持つことができませんが、任意の数またはユーザーを持つことができます。

次の子要素の条件。

• 子4は子4.1を持ちますが、子4.1は子を持つことはできません4.1.1。
• 子はレベル3までしか移動できません。
• 子はレベル3からレベル2に、またはその逆にドラッグできます。

この場合、チャイルド3はチャイルド4.2としてドラッグでき、チャイルド4.1はチャイルド3.1という新しいチャイルド5またはレベル3のチャイルドとしてドラッグできます。

この構造を達成するために、nestedとtypeのドラッグアンドドロップを統合しようとしています。私がこれまでに達成したかの

EDIT 1

Fiddle。

「男性」と「女性」の間でタイプチェックが行われます。各容器は、3人の男性と2人の女性を持つことができます。 は、今私は、リスト/子供がドラッグ可能にするために、その他のリスト/子の内側に落下することにしたいとこれらの子供たちは

<script type="text/ng-template" id="types.html"> 
     <ul dnd-list="list.people" 
     dnd-allowed-types="list.allowedTypes" 
     dnd-dragover="dragoverCallback(index,type,list,((list.people | filter:{type: 'men'}).length >= list.maxM),((list.people | filter: {type: 'woman'}).length >= list.maxW))" 
     dnd-drop="dropCallback(index, item, type)" 
     dnd-disable-if="(list.people.length >= (list.maxM+list.maxW))"> 

      <li ng-repeat="person in list.people" 
      dnd-draggable="person" 
      dnd-type="person.type" 
      dnd-moved="list.people.splice($index, 1)" 
      dnd-effect-allowed="move" class="background-{{person.type}}"> 
      <dnd-nodrag> 
       <div dnd-handle class="handle">:::</div> 
       <div class="name"> 
       <input type="text" ng-model="person.name" class="background-{{person.type}} form-control input-sm"> 
       </div> 
      </dnd-nodrag> 
      </li> 
      <li class="dndPlaceholder"> 
      Drop any <strong>{{list.allowedTypes.join(' or ')}}</strong> here 
      </li> 
     </ul> 
     </script> 

    <div class="typesDemo"> 

    <div ng-repeat="list in lists" class="col-md-4"> 
     <div class="panel panel-info"> 
     <div class="panel-heading"> 
      <h3 class="panel-title">List of {{list.label}} (max. {{list.max}})</h3> 
     </div> 
     <div class="panel-body" ng-include="'types.html'"></div> 
     </div> 
    </div> 

    </div> 

Answer 1

ドラッグ私のニーズを満たすために、コールバックリスナーを使用することはできません一つのメインの親の内側になります。

dnd-dragstart="dragStartCallBack(list,item,$index)" 
dnd-dragover="dragoverCallback(event,list,type,index)" 
dnd-drop="dropCallback(event,list,item,index)" 
dnd-inserted="insertedCallback(event,list,item,index)"