使用angular-drag-and-drop-lists追踪元素拖动前后的索引位置

嘿，我之前在使用angular-drag-and-drop-lists做列表重排序时，也踩过索引捕获的坑！你遇到的索引不符合预期的问题，大概率是对两个事件的触发时机和参数理解有偏差——咱们来一步步捋清楚。

问题根源分析 #

这个库的dnd-moved和dnd-inserted事件触发时机很关键：

• dnd-moved是元素从原列表移除前触发的，它的index参数是元素在原列表中的真实位置；
• dnd-inserted是元素插入新列表后触发的，它的index参数是元素在新列表中的最终位置；

很多人会犯的错是：在事件里手动通过ng-repeat的$index或者去列表里查找元素位置，这时候因为列表已经被修改（元素移走/插入），得到的索引自然和预期不符。

正确实现代码示例 #

模板（Markup） #

<!-- 绑定dnd-list到你的数据列表，同时监听两个事件 -->
<ul dnd-list="mySortableList"
    dnd-moved="handleItemMoved(item, index, external)"
    dnd-inserted="handleItemInserted(item, index, external)">
  <!-- 每个列表项绑定dnd-draggable -->
  <li ng-repeat="item in mySortableList"
      dnd-draggable="item"
      dnd-effect-allowed="move">
    {{item.content}}
  </li>
</ul>

控制器（Controller） #

angular.module('myApp', ['dndLists'])
.controller('SortableController', function($scope) {
  // 示例列表数据
  $scope.mySortableList = [
    {content: '第一项'},
    {content: '第二项'},
    {content: '第三项'},
    {content: '第四项'}
  ];

  // 临时存储旧索引（因为dnd-moved会先触发）
  let oldItemIndex = null;

  // 处理元素被移除事件
  $scope.handleItemMoved = function(item, index, isExternal) {
    // 只有同列表排序时才记录旧索引（跨列表的话external为true）
    if (!isExternal) {
      oldItemIndex = index;
      console.log(`元素【${item.content}】的旧索引：${oldItemIndex}`);
    }
  };

  // 处理元素被插入事件
  $scope.handleItemInserted = function(item, index, isExternal) {
    if (!isExternal && oldItemIndex !== null) {
      const newItemIndex = index;
      console.log(`元素【${item.content}】从索引${oldItemIndex}移动到了${newItemIndex}`);
      
      // 这里可以写你的业务逻辑：比如提交到后端、记录日志等
      // do something...

      // 重置临时变量，避免下次干扰
      oldItemIndex = null;
    }
  };
});

避坑指南 #

1. 不要手动查找索引：绝对不要在事件触发后去列表里通过findIndex之类的方法找元素位置，因为此时列表结构已经改变，得到的是修改后的索引；
2. 区分跨列表和同列表：用external参数判断是否是跨列表拖动，跨列表时旧索引来自原列表的dnd-moved，新索引来自目标列表的dnd-inserted；
3. 过滤/排序后的列表注意：如果你的mySortableList是经过filter或orderBy处理的，那事件里的index是过滤后数组的索引，若需要原始数据的索引，得自己根据元素关联的原始ID去匹配。

内容的提问来源于stack exchange，提问作者mindparse