Angular js drag and drop - angularjs

Question

I want to have drag and drop feature in the following structure.
Im using this library to make the above structure draggable.
But it has certain conditions to follow.
Main Parent is not draggable.
Main Parent can have any number of children.
Children can have any number of items.
Lets take Child 4.1. Say Item1 is of type admin and Item2 and Item3 are type users. Child can have only one admin but can have any number or users.
Next the condition for the child elements.
Child 4 has Child 4.1, but child 4.1 cannot have a inner child 4.1.1.
Child can move only upto level 3.
Child can be dragged from level 3 to level 2 and vice versa.
In this case, Child 3 can be dragged to as Child 4.2 and Child 4.1 can be dragged to as a new Child 5 or level 3 child named Child 3.1.
Im trying to integrate nested and type drag and drop to achieve this structure.
EDIT 1
Fiddle of what i have achieved so far.
Here type checking is done between 'men' and 'woman'. Each container can have only 3 men and 2 woman.
Now I want to make the list/child draggable and to be drop inside other list/child and these children will be inside one main parent which cannot be dragged
<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

Used the callback listeners to satisfy my needs.
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)"