3

我正在尝试在我的应用程序中使用 ng2-dragula 来添加重新排序已添加到列表中的指令列表的选项。例如，将其想象为您正在制作食谱并输入指令，但随后又想将其移至列表中的其他位置而不删除其他指令，等等。我会做类似的事情。

这是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>

所以我在正确的位置找到了指令，我已经有了*ngFor工作并且能够编辑指令，等等。我想要发生的一切都在工作，除了拖动以重新排序这些项目时。我查看了文档，特别是页面底部的 Angular 特定示例，这就是我获得[dragulaModel]指令信息的地方。问题是当我尝试拖放元素时，它们无法正确重新排序。我将尝试解释：

对于列表中有两个项目，拖动以重新排序不会重新排序它们。我放下第二个项目，让它成为第一个，然后它被放回原来的位置。

现在观看这个包含 3 个项目的 GIF：

3 项 gif

如您所见，我尝试将第 3 项移动到第二个位置。它不断下降到列表的底部。然后我把它放到首位，它将列表重新排序为 2、3、1。当列表中有 4 个或更多项目时，也会发生类似的事情。

此外，在尝试重新排序后添加新项目时，它会被放置在数组中的意外位置：

在此处输入图像描述

我不确定这笔交易是什么或如何解决。如果有人有这方面的经验并且可以提供帮助，我将不胜感激！

4

0 回答 0