Угловое js перетаскивание

Question

Я хочу иметь функцию перетаскивания в следующей структуре.

Im using this библиотека, чтобы сделать вышеуказанную структуру перетаскиваемой. Но у него есть определенные условия для подражания.

• Главный родитель не перетаскивается.
• Основной родитель может иметь любое количество детей.
• Дети могут иметь любое количество предметов.

Восстанавливает ребенка 4.1. Say Item1 имеет тип admin, а Item2 и Item3 - пользователи типа. Ребенок может иметь только одного администратора, но может иметь любое число или пользователей.

Далее условие для дочерних элементов.

• Ребенок 4 имеет ребенка 4.1, но ребенок 4.1 не может иметь внутреннего ребенка 4.1.1.
• Ребенок может двигаться только до уровня 3.
• Ребенка можно перетащить с уровня 3 на уровень 2 и наоборот.

В этом случае Child 3 можно перетащить, так как Child 4.2 и Child 4.1 можно перетащить в качестве нового ребенка Child 5 или третьего уровня с именем Child 3.1.

Im пытается интегрировать 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)"