Angular js 拖放

Question

我想在以下结构中具有拖放功能。

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

• 主父级不可拖动。
• 主父级可以有任意数量的子级。
• 儿童可以拥有任意数量的物品。

让我们来看看 Child 4.1。假设 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 的 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)"