问题
I'm trying to implement a Drag&Drop feature in my Angular application using the Angular Drag&Drop library.
My requirements are similar but not as complex as in the nested Containers Demo.
In this demo the templates are implemented recursively:
<!-- 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>
What I need:
Two dropzones where the first can only contain containers and the second can only contain items.
The containers may only contain items and no other containers.
How can I specify that
- Dropzone A may only contain containers
- Dropzone B may only contain items
- Containers may only contain items
In addition multi select should also be possible but I think I should be able to figure out how to implement that using the demo code.
来源：https://stackoverflow.com/questions/41166120/angular-dragdrop-containers-and-items