# DND State

If you review the [event callback function](../../getting-started/quickstart/basic-usage#callback-function-type-definitions), 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`:

```typescript
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.
