How can i use reactive value in initialValues in useDragAndDrop in vuejs

[alokVishu]

Hello there,

I am trying to create a Kanban app using a drag-and-drop plugin. I have to force update the component when I modify the initialValues array.

Is it possible to use a ref (reactive) value instead of a plain array?

const initialValues = [...] // want to use ref 
const [kanbanWrapper, todo] = useDragAndDrop(initialValues, { plugins: [animations()] })

[sashamilenkovic]

@alokVishu Hey there! You can use the alternative hook, dragAndDrop: https://drag-and-drop.formkit.com/#draganddrop

[sashamilenkovic]

@alokVishu Hey there! I'm doing well, how about yourself?

I would suggest maybe overriding the performTransfer (similar to how you would the handleEnd). That would give you an event listener for anytime an element is actually transferred to another board. Or, you could not override any events, and just create some sort of watcher for your list values to know when your list values have been updated.

[alokVishu]

Hello @sashamilenkovic,
Thanks for the reply.
I tried using performTransfer, but it only copies the item instead of transferring it. I have attached a video demonstrating the issue.

Screen.Recording.2024-05-09.at.5.25.30.PM.mov

[sashamilenkovic]

@alokVishu You need to import performTransfer and call it like you do for handleEnd

[alokVishu]

Oh like this?

dragAndDrop({
  parent: refKanbanBoard,
  values: localIds,
  group: props.groupName,
  draggable: child => child.classList.contains('kanban-card'),
  plugins: [animations()],
  performTransfer(state, data) {
    performTransfer(state, data)
  },
})

Thanks now it works.

[sashamilenkovic]

Right. The idea is that you can overwrite the existing functionality, or, use it as an event listener to add functionality either before or after the core performTransfer is invoked.