How to properly clone between Draggable

[lucadegasperi]

Hello, I've got 2 draggable components, from the first one objects can be cloned into the second draggable component. The problem Arises when cloning two object of the same type because they become interlinked (and changing data on one changes the data on the other) Is there a way to do a deep clone of one item?

[David-Desmaisons]

Hello @lucadegasperi , could you provide a fiddle showing the current behaviour and explaining what you would expect? Thanks.

[lucadegasperi]

Whoa, quick answer: Here's the fiddle: https://jsfiddle.net/32f7yu7c/ Try dragging one item from the list above to the list below and then click on the item in the list below. It will update the item in the list above as well (thus it's not a real cloning)

[David-Desmaisons]

I understand what you are trying to do and currently vue.draggable is designed to use the same object when the clone option is used.
I think that an extra hook could be provided to let the user decide the stategy to clone the dragged element.

[lucadegasperi]

Would be awesome as I'm stuck with this problem.

Even without a hook, where should I look for to properly clone the object?

[David-Desmaisons]

You should take a look at onDragAdd (evt) . That said I should provide the fix today or tomorrow.

[lucadegasperi]

Guess I can wait that long :) Thanks!

[David-Desmaisons]

Added the clone props to override the current cloning behaviour. See readme for documentation of this new function and this example: https://jsfiddle.net/dede89/dcvLufju/

[Sun11l]

这个问题困扰了老子很久很久 百度搜索搜不到 换了谷歌搜索 一下子就出来了 牛批牛批 感谢作者！
Thaaaaaaaaaaaaaaks!!!!!!!!!!

[dhubbard-ag]

I found another pretty good example of "clone" https://codepen.io/getreworked/pen/zMzzQR?editors=1010

[Pijushgupta]

https://wpconstant.com/vue-draggable-one-to-many-clone-vue3/