Angular 2, ng2-dragula and dragulaModel

Question

Angular 2, ng2-dragula and dragulaModel

I am trying to use ng2-dragula in my application to add a parameter to reorder the commands that have been added to the list. For example, think of it as if you were making a recipe and you were entering an instruction, but then wanted to move it to a different location in the list without deleting others, etc. I'm going to do something similar.

Here's the HTML:

<div [dragula]="'recipeInstructionBag'" [dragulaModel]="recipe.instructions">
    <div class="input-group" *ngFor="let instruction of recipe?.instructions; let i = index; trackBy:trackInstructions">
        <span class="input-group-addon reorder-trigger"><i class="fa fa-reorder"></i></span>
        <input class="form-control" type="text" [ngModel]="instruction" (ngModelChange)="recipe.instructions[i] = $event" [name]="'recipeInstruction' + i">
    </div>
</div>

So I have the directives in the right place, I have one *ngFor

that works and is able to edit the instructions in place, etc. Everything I want works, except for drag and drop cases to reorder these elements.I went through the docs , specifically the Angular specific examples at the bottom of the page, and where I got the information for the directive [dragulaModel]

. The problem is, when I try to drag and drop the items, they don't change as expected. I'll try to explain:

With two items in the list, dragging to reorder does not reorder them. I drop the second element to be the first, and it goes back to its original location.

Now let's look at this GIF with 3 elements:

As you can see, I am trying to move item 3 to second location. It continues to drop at the bottom of the list. Then I take it first and it reorders the list as 2, 3, 1. Similar things happen when there are 4 or more items in the list.

Also, when a new element is added after it has been reordered, it is put into the array in unexpected places: