Javascript Angularjs使用单个列表进行拖放

我有一个角度的应用程序在这

在这里，我试图通过一个列表来实现拖放功能

以下是应用程序：

app.controller('MainCtrl', function($scope) {
  $scope.people = [
      {'id':'1' ,'name':'John','category':'m'},
      {'id':'2', 'name':'Jack','category':'m'},
      {'id':'3','name':'Mark','category':'m'},
      {'id':'4','name':'Ernie','category':'m'},
      {'id':'5','name':'Jane','category':'w'},
      {'id':'6','name':'Jill','category':'w'},
      {'id':'7','name':'Betty','category':'w'},
      {'id':'8','name':'Mary','category':'w'}
      ];


      $scope.addText = "";


      $scope.dropSuccessHandler = function($event,index,array){
          //array[index].category='w';
          //findAndRemove(array, id, pid);
      //    alert(index, array[index]);
          array.splice(index,1);
      };


      $scope.onDrop = function($event,$data,array){
         // $data.category='m';

         // $scope.people.splice($scope.people.indexOf($data.id), 1);

          $scope.people.push($data);
          //array.push($data);
      };

});

问题是，当我试图将一个元素从右向左放置时，控制器被彻底弄糊涂了。“接头”命令正在删除错误的名称。当我们从左到右放置一个元素时，效果很好

---

如何解决这个问题？

当您拖动右侧列表中的项目时，传递给dropSuccessHandler函数的索引参数是右侧列表元素的索引，而不是实际javascript数组中的索引。Jane是索引0，Jill是索引1，等等。因此，如果拖动Jill，dropSuccessHandler函数将删除索引1处的数组元素，即Jack