setData()

This method lets you transfer data during drag-and-drop events. You can set the data when you start dragging and access it when you drop. However, setting data during the drag event isn't required; data can be set or modified at any event. For example, you can set the data in the "dragStart" event and modify it during "dragenter" or "dragmove" before accessing it in the "drop" event.

Definition: setData(data: any, element: DraggableElement): void

Description: Associates data with a draggable element.

Parameters:

• data (any) - The data to associate with the element.

• element (DraggableElement) - The draggable element.

Returns:

• void

Example:

const redropInstance = new Redrop()
const draggableItem = redropInstance.makeDraggable('.draggable', draggableOptions);
const droppableItem = redropInstance.makeDroppable('.droppable', droppableOptions);


// setting the data on a element in drag event
draggableItem.on("dragstart", (
  event: PointerEvent,
  state: DndState,
  element: DraggableElement,
) => {
  const dataToTransfer = // add your data here
  redropInstance.setData(data, element)
})

// options: you can also change the data in any event
// you need to pass the same element for the data to update or change
droppableItem.on("dragenter", (
  event: PointerEvent,
  state: DndState,
  element: DroppableElement,
  sortedIndex?: number | null,
) => {

  const data = state?.data;
  const dataToTransfer = // add new data or modify the existing data
  redropInstance.setData(data, draggableItem)
})

// getting the data in a drop event 
droppableItem.on("drop", (
  event: PointerEvent,
  state: DndState,
  element: DroppableElement,
  sortedIndex?: number | null,
) => {
const data = state?.data;
console.log(data)
})