title: Angular Drag&Drop - Containers and Items
body: <p>I'm trying to implement a Drag&amp;Drop feature in my Angular application using the <a href="http://marceljuenemann.github.io/angular-drag-and-drop-lists/" rel="nofollow noreferrer">Angular Drag&amp;Drop</a> library.</p>
  
  <p>My requirements are similar but not as complex as in the <a href="http://marceljuenemann.github.io/angular-drag-and-drop-lists/demo/#/nested" rel="nofollow noreferrer">nested Containers Demo</a>.</p>
  
  <p>In this demo the templates are implemented recursively:</p>
  
  <pre><code>&lt;!-- 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 --&gt;
  &lt;script type="text/ng-template" id="list.html"&gt;
      &lt;ul dnd-list="list"&gt;
          &lt;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'"&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/script&gt;
  
  &lt;!-- This template is responsible for rendering a container element. It uses
       the above list template to render each container column --&gt;
  &lt;script type="text/ng-template" id="container.html"&gt;
      &lt;div class="container-element box box-blue"&gt;
          &lt;h3&gt;Container {{item.id}}&lt;/h3&gt;
          &lt;div class="column" ng-repeat="list in item.columns" ng-include="'list.html'"&gt;&lt;/div&gt;
          &lt;div class="clearfix"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/script&gt;
  
  &lt;!-- Template for a normal list item --&gt;
  &lt;script type="text/ng-template" id="item.html"&gt;
      &lt;div class="item"&gt;Item {{item.id}}&lt;/div&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>What I need:<br>
  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.</p>
  
  <p><a href="https://i.stack.imgur.com/XUpCB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XUpCB.png" alt="How it should look"></a></p>
  
  <p>How can I specify that</p>
  
  <ul>
  <li>Dropzone A may only contain containers</li>
  <li>Dropzone B may only contain items</li>
  <li>Containers may only contain items</li>
  </ul>
  
  <p>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.</p>