VueJs Change dragged item values

Question

I am using Vue Draggable

I have two lists with the "clone" option. Each list has a different Array. I'm wondering if there is any possibility when dragging an item from list 1 to list 2, To change values to the dropped item in list 2.

For example I have in list 1 this item:

[{"type":"text","icon":"fa fa-text"}]

When dragged and dropped to list 2 it becomes:

[{"type":"text","id":"XXXX", "value":"My Text is Here","style":"...."}]

I don't know what event to list two and how to do it.

Thank you

Answer 1

Why dont you use the onMoveCallback function for the event handeling. The code should be something like this

function onMoveCallback(event, originalEvent){
    event.draggedContext.element = //whatever changes you want to make 

}

P.S I am not very clear on whether this is what you want . you can refer to the link in your document you mentioned

Answer 2

You can use the clone props on the draggable component linked to list1.

Template:

<draggable :clone="clone" ...>

JS:

methods:{
  clone(element){
    return {
       type: element.type,
       value: "My Text is Here",
       style: "...."
    }
  }
}