vue3中使用Vue.Draggable的clone模式及遇到的坑

最近有个需求是从左边一个列表中，拖动列表元素到右边列表中，并且不是移动拖拽，而是复制拖拽，元素在右边列表中可以重复，比如左边是参加某个游戏的队员名单，右边是出场顺序，队员可以重复上场。类似这种效果：

代码：

// 左边的列表
 

          
队员选择
          
            
          
        

//  右边的列表

            
          

我用的是 Vue.Draggable 组件，不得不说这个组件真是太好用了，它的官方地址：vue.draggable github地址

官方演示地址： https://sortablejs.github.io/Vue.Draggable/#/clone 其中我用的就是 clone 模式。

Vue.Draggable 拿来即用，没啥难以上手的，就是我在使用的时候遇到一个问题，就是当右边有重复的数据时，多次上下快速拖动右边的元素排序，会偶发一个bug：右边列表会自动多出一个数据，并且操作不了（没法删除也没法给它排序）。

官方在 github 上的示例代码是：

经过一番曲折的找bug原因历程，后来发现是我自己用的不合适，就是在右边表格的 item-key 属性用的是id，本以为id是唯一的，后来出现上面提到那个bug的时候，控制台也报警告说有重的 itemKey 。然后我意识到由于我右边的元素是可以重复的，所以其实用id做 itemKey 也不是唯一的。

后来我用 index 做右边拖拽列表的 itemKey 了，也不知道这样合不合适，但确实是没有刚才那个bug了，因为 index 是不会重复的。

//  右边的列表

            
          

希望本文对您有所帮助，，也希望大佬不吝赐教！