DND State

If you review the event callback function, you’ll notice that the second argument is state. This state object manages the status of the dragged element, the element being dragged over, and any data that needs to be transferred.

Let’s quickly go through the type definition of the DndState:

type Coords = { x: number; y: number };
type EventInfo = {
  rect: DOMRect;
  target: HTMLElement;
  position: {
    page: Coords;
    client: Coords;
    offset: Coords;
    screen: Coords;
  };
};
export type DndState = {
  active: {
    element: DraggableElement;
    options: BaseDraggableType;
    isDisabled: boolean;
    info: EventInfo;
  } | null;
  over: {
    element: DroppableElement;
    options: BaseDroppableType;
    isDisabled: boolean;
    info: EventInfo;
  } | null;
  data: any;
};

While the type definition clarifies much, let’s break it down for a better understanding:

Coords

Represents a set of coordinates:

• x: Horizontal position.

• y: Vertical position.

EventInfo

Holds detailed information about an event:

• rect: The bounding rectangle of the target element.

• target: The HTML element involved in the event.

• position: Includes multiple coordinate types:

  • page: The position relative to the page.

  • client: The position relative to the viewport.

  • offset: The offset position of the pointer within the element.

  • screen: The position relative to the screen.

DndState

1. active: Represents the element currently being dragged:

   • element: The active draggable element.

   • options: Options applied to the draggable element.

   • isDisabled: Indicates whether the draggable element is disabled.

   • info: Event details (as described in EventInfo).

2. over: Represents the element which was the last dragged over element:

   • element: The droppable element under the dragged item.

   • options: Options applied to the droppable element.

   • isDisabled: Indicates whether the droppable element is disabled.

   • info: Event details (as described in EventInfo).

3. data: Contains any data to be transferred during the drag-and-drop operation. This can be any type (string, object, etc.).

Summary

The DndState object provides critical context during drag-and-drop operations, such as:

• Which element is currently active (dragged).

• Which element is being dragged over.

• Metadata and event information for both active and over elements.

• Data being transferred during the operation.

Understanding DndState is key to leveraging ReDrop’s full potential, as it allows you to manage states dynamically and implement advanced drag-and-drop behaviors effectively.