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
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
. 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:
I'm not sure what the deal is or how to fix it. If anyone has experience with this and can help, I would really appreciate it!
source to share
No one has answered this question yet
Check out similar questions: