VueJs更改拖动的项目值

Question

我正在使用Vue Draggable

我有两个列表＆＃34; clone＆＃34;选项。每个列表都有一个不同的数组。 我想知道是否有可能将项目从列表1拖到列表2，将值更改为列表2中已删除的项目。

例如我在列表1中有这个项目：

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

当拖放到列表2时，它变为：

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

我不知道要列出哪个事件以及如何做到这一点。

谢谢

Answer 1

您可以使用链接到list1的可拖动组件上的clone道具。

模板：

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

JS：

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

Answer 2

为什么不使用onMoveCallback函数进行事件处理。代码应该是这样的

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

}

P.S我不清楚这是否是你想要的。你可以参考你提到的文件中的链接