transferElm()

While working with drag and drop you will often require to transfer element from one element to another and to make that easier you can use this function.

For more information about this method checkout Transfer Element

Definition:

transferElm(element: DraggableElement, targetContainer: DroppableElement, configOptions?: Partial<TransferOptions>): DraggableElement

Description: Moves or copies a draggable element to a new container with optional transfer settings.

Parameters:

• element (DraggableElement) - The element to transfer.

• targetContainer (DroppableElement) - The target container to move the element into.

• configOptions (Partial<TransferOptions>, optional) - Configuration options for the transfer.

Returns:

• DraggableElement - The moved element.

Example:

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

draggableItem.on("dragstart", (
  event: PointerEvent,
  state: DndState,
  element: DraggableElement,
) => {
  // perform you task here
})



droppableItem.on("drop", (
  event: PointerEvent,
  state: DndState,
  element: DroppableElement,
  sortedIndex?: number | null,
) => {
const draggableElement = state.active?.element!
  redropInstance.transferElm(draggableElement, element, {
    action: "move",
    makeDraggable: false,
    position: "index",
    index: sortedIndex,
  });
})