title: Can't make multiple inners draggable object from angular 5 & dragula
body: <p>I'm trying since few days and can't make it works...</p>
  
  <p>Little explanation : </p>
  
  <p>I've in this example, an array of object like this : </p>
  
  <pre><code>public containers: Array&lt;object&gt; = [
    {
      "name": "container 1",
      "items": ["1", "2", "3"]
    },
    {
      "name": "container 2",
      "items": ["4", "5"]
    }
  ];
  </code></pre>
  
  <p>Where each object have an array of string.</p>
  
  <p>I'm generating divs to make these object moves (Containers AND Items).</p>
  
  <p>Now, i'm getting something like this : </p>
  
  <p><a href="https://i.stack.imgur.com/y2n9R.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/y2n9R.png" alt="enter image description here"></a></p>
  
  <p>Where red box is the main div, blacks boxes are containers, and blue boxes are items.</p>
  
  <p>with this html : </p>
  
  <pre><code>&lt;div class="feuille-drag" [dragula]='"containers"' [dragulaModel]='containers'&gt;
    &lt;div *ngFor="let container of containers" class="drag-container" [dragula]='"blocks"'[dragulaModel]='container.items'&gt;
      &lt;span class="handle"&gt;O&lt;/span&gt;
      &lt;div *ngFor="let item of container.items" class="drag-bloc"&gt;
        &lt;span class="handleF"&gt;X&lt;/span&gt;
        {{item}}
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>And this typescript, where I only set fews options : </p>
  
  <pre><code>dragulaService.setOptions('containers', {
    revertOnSpill: true,
    copy: false,
    moves: function (el, container, cHandle) {
      return cHandle.className === 'handle';
    }
  });
  
  dragulaService.setOptions('blocks', {
    revertOnSpill: true,
    copy: false,
    moves: function (el, container, bHandle) {
      return bHandle.className == 'handleF';
    }
  });
  </code></pre>
  
  <p>If you looks well, you can see in the screenshot that, there is an empty blue box. It wasn't here at the beginning, I only dropped a blue box into another one, and it created an <code>undefined</code> element into my object Containers.</p>
  
  <p>An other problem :
  If I move a blue box into an other black box (container), the blue box will disappear and an other blue box will move instead.</p>
  
  <p>Example : If I move the blue box 1 into the container 2, the box 1 will disappears, and the box 2 will go into the container 2.</p>
  
  <p>BUT It will not be deleted into the object Containers :</p>
  
  <p><a href="https://i.stack.imgur.com/5r5LR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5r5LR.png" alt="enter image description here"></a></p>
  
  <p>End, last thing, handle elements from containers (O) are being read like draggable object from dragula.
  Its maybe just a css problem, but i'm not sure so...</p>
  
  <p>I'm using Angular CLI, Angular 5, Dragula, and i'm pretty new on Angular, (I still was on AngularJS sometimes ago).</p>
  
  <p>I hope it's well explained, hope someone can help me, and I'm sorry if there is already an answer about it, I didn't find it !</p>
  
  <p>Have a nice day ! </p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>See this <a href="https://stackblitz.com/edit/angular-ng2-dragula" rel="nofollow noreferrer">stackbliz</a> </p>