使用角度拖放列表跟踪索引位置更改

Question

我正在使用angular-drag-and-drop-lists，并有一个我希望重新订购的项目的简单列表。

我有这个工作，但我希望能够捕获正在移动的项目的旧的和新的索引位置。

我根据下面的代码使用dnd-moved和dnd-inserted尝试过此操作。

标记：

<ul dnd-list="vm.route.stops"
        dnd-inserted="vm.stopInserted(index)">
          <li ng-repeat="stop in vm.route.stops"
              dnd-draggable="stop"
              dnd-moved="vm.stopMoved($index)"
              dnd-effect-allowed="move">
              <span>{{$index + 1}}.</span>
              <md-card style="width:280px;">
                <div layout="row">
                    {{stop.location}}
                </div>
              </md-card>
          </li>
      </ul>

控制器：

public stopMoved = (index: number) => {
    const stop = this.route.stops[index];
    console.log('Moved stop: ' +  stop.name + ' from position: ' + index);
    this.route.stops.splice(index, 1);
  }

  public stopInserted = (index: number) => {
    const stop = this.route.stops[index];
    console.log('Inserted stop: ' +  stop.name + ' at position: ' + index);
  }

我发现的问题是移动和插入停止时的输出索引值不是我所期望的。

我想我可能正在讨论dnd-inserted属性的文档中提到的内容：

  

请注意，对于旧元素将在同一列表中重新排序   由于dnd-moved尚未被调用

，因此仍然在列表中

因此，请考虑我的列表中添加了四个项目。

然后我移动了考文特花园＆＃39;下滑到滑铁卢大桥的地方＆＃39;是：

控制台输出正确显示它已从索引0移动但是在索引3处插入（我希望它会说2）

在dnd-inserted之前调用dnd-moved函数，该函数遵循我在文档中进一步引用的引用。

如果我向另一个方向移动项目，那么从下到上，我会看到与捕获的索引类似的行为。

所以从以下开始：

我移动＆＃39; Blackfriars＆＃39;到了Southwark＆＃39;是：

控制台输出显示为：

我希望看到它已从指数3转移。

我可能误解了使用这个库的基本原理。是否有一种干净的方法来跟踪项目的旧索引位置和新索引位置在删除后插入到此库中的垂直列表中？

由于