title: Angular 2, ng2-dragula, and dragulaModel
body: <p>I'm trying to use ng2-dragula in my app to add the option to reorder a list of instructions that were added to a list. For example, think of it as if you were making a recipe and you put in an instruction but then wanted to move it somewhere else in the list without deleting other ones, etc. I'm going for something similar.</p>
  
  <p>Here's the HTML:</p>
  
  <pre><code>&lt;div [dragula]="'recipeInstructionBag'" [dragulaModel]="recipe.instructions"&gt;
      &lt;div class="input-group" *ngFor="let instruction of recipe?.instructions; let i = index; trackBy:trackInstructions"&gt;
          &lt;span class="input-group-addon reorder-trigger"&gt;&lt;i class="fa fa-reorder"&gt;&lt;/i&gt;&lt;/span&gt;
          &lt;input class="form-control" type="text" [ngModel]="instruction" (ngModelChange)="recipe.instructions[i] = $event" [name]="'recipeInstruction' + i"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>So I've got the directives in the right spot, I've got the <code>*ngFor</code> working and able to edit instructions in place, etc. Everything that I want to happen is working, except when dragging to reorder these items. <a href="http://valor-software.com/ng2-dragula/index.html" rel="nofollow noreferrer">I've looked at the docs</a>, specifically the Angular specific examples at the bottom of the page, and that's where I got the info for the <code>[dragulaModel]</code> directive. The problem is when I try and drag and drop elements, they don't reorder properly. I'll try and explain:</p>
  
  <p>With two items in the list, dragging to reorder doesn't reorder them. I drop the second item so that it should be the first, and it gets placed back in its original spot.</p>
  
  <p>Now watch this GIF with 3 items:</p>
  
  <p><a href="https://i.stack.imgur.com/seUyb.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/seUyb.gif" alt="3 items gif"></a></p>
  
  <p>As you can see I try and move item 3 into the second spot. It keeps getting dropped to the bottom of the list. Then I take it to the top spot, and it reorders the list to be 2, 3, 1. Similar things happen when there are 4 or more items in the list.</p>
  
  <p>Also, when adding a new item after trying to reorder, it gets placed in the array in unexpected places:</p>
  
  <p><a href="https://i.stack.imgur.com/t5huQ.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/t5huQ.gif" alt="enter image description here"></a></p>
  
  <p>I'm not sure what the deal is or how to fix it. If anyone has experience with this and can help, I'd greatly appreciate it!</p>