Alfred-Skyblue / vue-draggable-plus

Universal Drag-and-Drop Component Supporting both Vue 3 and Vue 2
https://vue-draggable-plus.pages.dev/en/
MIT License
2.72k stars 106 forks source link

克隆 + 双列表拖拽,联合使用时的bug #84

Closed LMchensir closed 6 months ago

LMchensir commented 6 months ago

克隆 + 双列表拖拽,联合使用时的bug,相同的且顺序紧挨着的组件将第一个clone过来的组件从list2,拖入list3时,会导致list2中相同的组件消失

复现条件:

  1. 克隆 + 双列表拖拽联合使用
  2. 从克隆组件,clone两个相同的组件到list2中,且这两个相同的组件顺序要紧挨着
  3. 将clone进list2中的两个相同组件中的第一个,必须是第一个,第二个不会出现问题,拖入list3中,就会导致list2中剩余的那个组件消失

简单录了一个操作视频,但是我不知道为什么我的视频无法在线观看,请下载后观看,谢谢 https://github.com/Alfred-Skyblue/vue-draggable-plus/assets/51938074/d78014f4-4ed5-4c20-b6b3-90c6abb13a73

下面是完整的复现代码,只有一个代码,下载后就可以复现是使用

cloneMultiDrag.txt

image

1340145680 commented 6 months ago

一样的问题+1,列表1还有两个元素,将一个拖到其他列表会消失 2023-12-31_15-52-01

1340145680 commented 6 months ago

一样的问题+1,列表1还有两个元素,将一个拖到其他列表会消失 bug应该是重绘造成的,数据存在,但dom元素没更新。目前我的临时解决办法是在列表上都加上@add事件,然后通过v-if强制刷新dom。 image image

Alfred-Skyblue commented 6 months ago

https://alfred-skyblue.github.io/vue-draggable-plus/faq/#%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98

Please ensure the uniqueness of the key. You should update the key in the clone option to prevent rendering errors caused by duplicate keys when dragging multiple identical elements.

useDraggable(el1, list1, {
  animation: 150,
  group: { name: 'people', pull: 'clone', put: false },
  sort: false,
  clone(item: Record<'id' | 'name', string>) {
    return {
      ...item,
      // 更新 id
      id: item.id + +new Date()
    }
  }
})
截屏2023-12-31 20 07 28