Angular js拖放

Question

我想在以下结构中使用拖放功能。

我正在使用this库来使上述结构可拖动。 但它有一定的条件要遵循。

• 主要父母不可拖动。
• 主要家长可以有任意数量的孩子。
• 儿童可以拥有任意数量的物品。

让我们看看孩子4.1。假设Item1是admin类型，Item2和Item3是类型用户。 儿童只能拥有一名管理员，但可以拥有任何数量或用户。

接下来是子元素的条件。

• 孩子4有孩子4.1，但孩子4.1不能有孩子4.1.1。
• 孩子只能移动到3级。
• 可以将孩子从3级拖到2级，反之亦然。

在这种情况下，可以将子级3拖动到子级4.2，将子级4.1拖动到名为子级3.1的新子级5或级别3子级。

我试图整合nested和type拖放来实现这种结构。

编辑1

到目前为止我所取得的成就Fiddle。

此处类型检查在'men'和'woman'之间完成。每个容器可以有只有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)"