Draggable: What is the equivalent of dataTransfer.setData and dataTransfer.getData

[mbarakaja]

Actually I am building an interface that needs to pass information from one component to another via drag and drop. But the interface does not need to move HTML elements around, just information attached to the draggable elements.

To do this, I am using DataTransfer.setData() and DataTransfer.getData() APIs.

So, what is the equivalent of those in this library?

[tsov]

@mbarakaja Thanks for bringing this up! There is no API to do this internally with draggable, but there are workarounds to this issue.

You could do this via HTMLElement.dataset or HTMLElement attributes on drag:start and drag:stop. (set on drag start and read on drag stop)

Alternatively you could use the DragSensor, which uses the browsers Drag and Drop API, you could something like:

const draggable = new Draggable(containers, {
  draggable: 'some-selector',
  // Adds the native drag sensor, which is not included by default
  sensors: [DragSensor],
});

// Removes the mouse sensor, which is included by default
draggable.removeSensor(MouseSensor);

draggable.on('drag:start', ({sensorEvent}) => {
  // originalEvent is now a native Browser Drag event with DataTransfer object
  const originalEvent = sensorEvent.originalEvent;

  originalEvent.dataTransfer.setData(/* ... */);
})

draggable.on('drag:stop', ({sensorEvent}) => {
  const originalEvent = sensorEvent.originalEvent;

  console.log(originalEvent.dataTransfer.getData(/* ... */));
})

There are currently no plans to add a native DataTransfer API for Draggable, but this may change depending on demand.

I hope this helped

[tsov]

Let me know if that answered your question @mbarakaja .
Closing this for now

[mbarakaja]

Hello @tsov, sorry for not texting you back. Your post was really helpful. I ended up using the native drag and drop API.

Draggable is fantastic, but is overkill for what I need for now.

Thank you very much.