atlassian / pragmatic-drag-and-drop

Fast drag and drop for any experience on any tech stack
https://atlassian.design/components/pragmatic-drag-and-drop
Other
7.45k stars 133 forks source link

Drag and drop with video element #11

Closed ralfcarneborn closed 1 month ago

ralfcarneborn commented 1 month ago

Hi, congratulations on the release!

Im trying to make a simple example to work in vue 3 with video. Im trying to copy the Grid example from the docs, and just making a simple swap work in a grid or list.

https://codesandbox.io/p/devbox/pragmatic-dnd-forked-nmlnsj

My issue is that it will replace the actual item, but the video does not seem to want to come along. If I seek to 50% in the video from the "A" container, then drag it to "B" and drop, it will swap the items but the video that i was hoping would move to "B" is still left in "A" on 50%.

What am I doing wrong?

alexreardon commented 1 month ago

Looks like a vue iteration issue.

If you make this change, you should be all good

- key="item"
+ :key="item"

https://codesandbox.io/p/devbox/pragmatic-dnd-forked-jgz3fk?file=%2Fsrc%2FApp.vue%3A16%2C88