title: Drag and drop angular-material2 chips with ng2-dragula library
body: <p>Using <a href="https://material.angular.io" rel="nofollow noreferrer">angular2 material</a> and <a href="https://github.com/bevacqua/dragula#readme" rel="nofollow noreferrer">dragula</a>, I want to drag and drop <a href="https://material.angular.io/components/component/chips" rel="nofollow noreferrer">chips</a> with <a href="https://github.com/bevacqua/dragula" rel="nofollow noreferrer">ng2-dragula</a> library.</p>
  
  <p>Specifying the dragula containers:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;md-chip-list [dragula]="'bag-chips'"&gt;
    &lt;md-chip&gt;Chip 1&lt;/md-chip&gt;
    &lt;md-chip&gt;Chip 2&lt;/md-chip&gt;
  &lt;/md-chip-list&gt;
  
  &lt;md-chip-list [dragula]="'bag-chips'"&gt;
    &lt;md-chip&gt;Chip 3&lt;/md-chip&gt;
    &lt;md-chip&gt;Chip 4&lt;/md-chip&gt;
  &lt;/md-chip-list&gt;
  </code></pre>
  
  <p>The above doesn't work because Angular-material creates a wrapper <code>div.md-chip-list-wrapper</code> inside <code>md-chip-list</code>. When we attempt to drag and drop, the whole wrapper gets dragged.</p>
  
  <p>I tried to fix the problem with dragula's <a href="https://github.com/bevacqua/dragula#optionsiscontainer" rel="nofollow noreferrer"><code>isContainer</code></a> method, but dragging didn't work at all.</p>
  
  <pre class="lang-js prettyprint-override"><code>constructor(private dragula: DragulaService) {
    dragula.setOptions('bag-chips', {
      isContainer(el) {
        return el.classList.contains('md-chip-list-wrapper');
      }
    }
  }
  </code></pre>
  
  <p>I tried to fix the problem by adding a div wrapper inside <code>md-chip-list</code>, but that seems to error in angular material.</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;md-chip-list&gt;
    &lt;div [dragula]="'bag-chips'"&gt;
      &lt;md-chip&gt;Chip&lt;/md-chip&gt;
    &lt;/div&gt;
  &lt;/md-chip-list&gt;
  </code></pre>
  
  <p>So how to make the <code>md-chip-list</code> work with ng2-dragula?</p>