Angular Drag＆amp; Drop - 容器和物品

Question

我正在尝试使用Angular Drag&Drop库在我的Angular应用程序中实现拖放功能。

我的要求与nested Containers Demo中的要求相似但并不复杂。

在本演示中，模板以递归方式实现：

<!-- Markup for lists inside the dropzone. It's inside a seperate template
     because it will be used recursively. The dnd-list directive enables
     to drop elements into the referenced array. The dnd-draggable directive
     makes an element draggable and will transfer the object that was
     assigned to it. If an element was dragged away, you have to remove
     it from the original list yourself using the dnd-moved attribute -->
<script type="text/ng-template" id="list.html">
    <ul dnd-list="list">
        <li ng-repeat="item in list"
            dnd-draggable="item"
            dnd-effect-allowed="move"
            dnd-moved="list.splice($index, 1)"
            dnd-selected="models.selected = item"
            ng-class="{selected: models.selected === item}"
            ng-include="item.type + '.html'">
        </li>
    </ul>
</script>

<!-- This template is responsible for rendering a container element. It uses
     the above list template to render each container column -->
<script type="text/ng-template" id="container.html">
    <div class="container-element box box-blue">
        <h3>Container {{item.id}}</h3>
        <div class="column" ng-repeat="list in item.columns" ng-include="'list.html'"></div>
        <div class="clearfix"></div>
    </div>
</script>

<!-- Template for a normal list item -->
<script type="text/ng-template" id="item.html">
    <div class="item">Item {{item.id}}</div>
</script>

我需要什么：
两个dropzones，其中第一个只能包含容器，第二个只能包含项目。 容器可能只包含物品而不包含其他容器。

如何指定

• Dropzone A只能包含容器
• Dropzone B可能只包含项目
• 容器只能包含项目

此外还应该可以进行多选，但我想我应该能够弄清楚如何使用演示代码来实现它。