# Type definitions

This page contains types which are used in the library and which you can also import by importing "RedropTypes" which contains all the following types.&#x20;

{% code overflow="wrap" %}
```typescript
import { RedropTypes as rdt } from "redrop-dnd";

const dndManager = new Redrop();

const draggableItem: rdt.DraggableElements = dndManager.makeDraggable("#draggableElm", draggableOptions);
```
{% endcode %}

Similar way you can asses all the types mentioned in this type definition. Mostly you will be required to use DraggableElement or DroppableElement types as by default normal elements have HTMLElement type which do not have on method attached. So whenever you get any typescript error, you can come to this definition and check for the type which you require. I usually like to use as keyword with import so that I can rename the types with some initials.



This page contains types for the following type categories.

* [ReDrop Class](#redrop-class)
* [Draggable types](#draggables-types)
* [Droppabele types](#droppables-types)
* [Global types](#global-types)
* [Event types](#events-types)
* [state types](#drag-and-drop-state-type)
* [Util types](#utils-types)

### ReDrop Class

For more information about the methods pelase check [redrop](redrop "mention")

```typescript
class Redrop {
    #private;
    constructor(initialGlobalOptions?: GlobalOptions);
    static getDraggables(): Draggables;
    static getDraggables(instance: Redrop): DraggableInfo[];
    static getDraggables(instance: Redrop, element: Element | DraggableElement | null): DraggableInfo;
    static getDroppables(): Droppables;
    static getDroppables(instance: Redrop): DroppableInfo[];
    static getDroppables(instance: Redrop, element: Element | DroppableElement | null): DroppableInfo;
    transferElm(element: DraggableElement, targetContainer: DroppableElement, configOptions?: Partial<TransferOptions>): DraggableElement;
    makeDraggable(element: Element | string | null, options?: DraggableOptions): DraggableElement;
    makeDroppable(element: Element | string | null, options?: DroppableOptions): DroppableElement;
    makeDraggables(elements: NodeListOf<Element> | HTMLCollectionOf<Element> | string[] | string, options?: DraggableOptions): DraggableElements;
    makeDroppables(elements: NodeListOf<Element> | HTMLCollectionOf<Element> | string[] | string, options?: DroppableOptions): DroppableElements;
    unregister(element: DraggableElement | DroppableElement, type: "draggable" | "droppable"): DroppableElement | DraggableElement;
    setData(data: any, element: DraggableElement): void;
    updateOptions(options: DraggableOptions | DroppableOptions, reference: DraggableElement | DroppableElement | DraggableElements | DroppableElements | "drag" | "drop"): void;
    disable(reference?: DraggableElement | DroppableElement | DraggableElements | DroppableElements | "drag" | "drop"): void;
    enable(reference?: DraggableElement | DroppableElement | DraggableElements | DroppableElements | "drag" | "drop"): void;
}
```



### **Draggables Types** &#x20;

For explanation check - [options](options "mention")

1.  **`BaseDraggableType`&#x20;**&#x20; \
    Defines the structure and behaviour of a draggable element, including identifiers, modifiers, accessibility options, and associated data.&#x20;

    ```ts
    export type BaseDraggableType = {
      identifier: {
        id: string;
        type: string;
      };
      modifiers: {
        disabled: boolean;
        cursor: {
          offset: {
            x: number;
            y: number;
            preset: "top-left" | "top-right" | "bottom-left" | "bottom-right" | "center" | "auto";
          };
          dragEffect: string;
        };
        autoRemove: boolean;
        dragPreview: {
          customPreview: HTMLElement | ((element?: DraggableElement) => HTMLElement) | null;
          ghost: boolean;
          class: string;
          scale: number;
        };
        tolerance: {
          disabled: boolean;
          time: number;
          distance: number;
          strictMatch: boolean;
        };
        dragHandleClass: string;
      };
      accessibility: {
        role: string;
        tabIndex: number;
        "aria-roledescription": string;
      };
      data: any;
    };
    ```


2.  **`DraggableOptions`**\
    Represents customizable options for a draggable element.

    ```ts
    export type DraggableOptions = RecursiveAtLeastOne<BaseDraggableType>;
    ```


3.  **`Draggables`**\
    A map containing draggable configurations associated with their elements.

    ```ts
    export type Draggables = Map<Redrop, Map<Element, BaseDraggableType>>;
    ```


4.  **`DraggableElement`**\
    A specialised HTML element with draggable capabilities.

    ```ts
    export type DraggableElement = HTMLElement & {
      _Redrop: {
        draggableOptions: BaseDraggableType;
      };
      on: OnDragEvent;
    };
    ```


5.  **`DraggableElements`**\
    A collection of draggable elements with event handling.

    ```ts
    export type DraggableElements = (DraggableElement[] | []) & { on: OnDraggablesEvent };
    ```


6.  **`DraggableInfo`**\
    Provides metadata about a specific draggable element.

    ```ts
    export type DraggableInfo = {
      draggableOptions: BaseDraggableType;
      element: DraggableElement;
    };
    ```


7.  **`TransferOptions`**\
    Configures options for transferring draggable elements during operations.

    ```ts
    export type TransferOptions = {
      action: "copy" | "move";
      position: "prepend" | "append" | "index";
      index: number | null;
      makeDraggable: boolean;
      reActivate: boolean;
      reuseOptions: boolean;
      reuseListeners: boolean;
      options: DraggableOptions;
    };
    ```

***



### **Droppables Types**

For explanation check - [options](options "mention")

1.  **`BaseDroppableType`**\
    Defines the structure and behavior of a droppable element, including identifiers, modifiers for sorting and highlighting, and other options.

    ```ts
    export type BaseDroppableType = {
      identifier: {
        id: string;
        type: {
          accept: string[];
        } | {
          reject: string[];
        };
      };
      modifiers: {
        disabled: boolean;
        sorting: {
          isEnabled: boolean;
          elmClass: string;
          action: "swap" | "highlight";
          highlightClass: string;
        };
        highlight: {
          on: "dragmove" | "dragover" | "none";
          class: string;
        };
      };
      accessibility: {
        role: string;
        tabIndex: number;
        "aria-roledescription": string;
      };
      data: any;
    };
    ```


2.  **`DroppableOptions`**\
    Represents customizable options for a droppable element.

    ```ts
    export type DroppableOptions = RecursiveAtLeastOne<BaseDroppableType>;
    ```


3.  **`Droppables`**\
    A map containing droppable configurations associated with their elements.

    ```ts
    export type Droppables = Map<Redrop, Map<Element, BaseDroppableType>>;
    ```


4.  **`DroppableElement`**\
    A specialized HTML element with droppable capabilities.

    ```ts
    export type DroppableElement = HTMLElement & {
      _Redrop: {
        droppableOptions: BaseDroppableType;
      };
      on: OnDropEvent;
    };
    ```


5.  **`DroppableElements`**\
    A collection of droppable elements with event handling.

    ```ts
    export type DroppableElements = (DroppableElement[] | []) & { on: OnDroppablesEvent };
    ```


6.  **`DroppableInfo`**\
    Provides metadata about a specific droppable element.

    ```ts
    export type DroppableInfo = {
      droppableOptions: BaseDroppableType;
      element: DroppableElement;
    };
    ```


7.  **`GetDragOverElement`**\
    Represents an element being dragged over during an operation.

    ```ts
    export type GetDragOverElement = {
      element: HTMLElement;
      rect: DOMRect;
    };
    ```



***

### **Events Types**

1.  **`EventAbortController`**\
    Provides methods to manage and abort drag-and-drop event listeners.

    ```ts
    export type EventAbortController = {
      abort: () => void;
      signal: AbortSignal;
    };
    ```


2.  **`DragEventName`**\
    Enumerates drag event names.

    ```ts
    export type DragEventName = "drag" | "dragstart" | "dragend";
    ```


3.  **`DropEventName`**\
    Enumerates drop event names.

    ```ts
    export type DropEventName = "dragenter" | "dragleave" | "dragover" | "drop";
    ```


4.  **`DragEventCallback`**\
    A callback function for handling drag events.

    ```ts
    export type DragEventCallback = (event: DragEvent) => void;
    ```


5.  **`DragListeners`**\
    Defines a set of drag event listeners.

    ```ts
    export type DragListeners = {
      [key in DragEventName]?: DragEventCallback;
    };
    ```


6.  **`DropEventCallback`**\
    A callback function for handling drop events.

    ```ts
    export type DropEventCallback = (event: DragEvent) => void;
    ```


7.  **`DropListeners`**\
    Defines a set of drop event listeners.

    ```ts
    export type DropListeners = {
      [key in DropEventName]?: DropEventCallback;
    };
    ```


8.  **`OnDragEvent`**\
    A handler for custom drag events.

    ```ts
    export type OnDragEvent = (event: CustomEvent) => void;
    ```


9.  **`OnDraggablesEvent`**\
    A handler for events on multiple draggable elements.

    ```ts
    export type OnDraggablesEvent = (event: CustomEvent) => void;
    ```


10. **`OnDropEvent`**\
    A handler for custom drop events.

    ```ts
    export type OnDropEvent = (event: CustomEvent) => void;
    ```


11. **`OnDroppablesEvent`**\
    A handler for events on multiple droppable elements.

    ```ts
    export type OnDroppablesEvent = (event: CustomEvent) => void;
    ```

***

### **Global Types**

1.  **`BaseGlobalType`**\
    Defines global configurations shared across the library.

    ```ts
    export type BaseGlobalType = {
      debug: boolean;
      logging: boolean;
    };
    ```


2.  **`GlobalOptions`**\
    Represents customizable global options for the library.

    ```ts
    export type GlobalOptions = RecursiveAtLeastOne<{
      debug: boolean;
      logging: boolean;
    }>;
    ```


3.  **`ExtendedElement`**\
    Represents a union of draggable and droppable elements.

    ```ts
    export type ExtendedElement = DraggableElement | DroppableElement;
    ```

***

### **Drag and Drop State Type**

1.  **`DndState`**\
    Represents the state of drag-and-drop operations.

    ```ts
    export type DndState = {
      currentDraggable: DraggableElement | null;
      currentDroppable: DroppableElement | null;
    };
    ```


2.  **`SetState<T>`**\
    A helper type to set the drag-and-drop state.

    ```ts
    export type SetState<T extends DraggableElement | DroppableElement> = T extends DraggableElement
      ? { draggable: T }
      : { droppable: T };
    ```

***

### **Utils Types**

1.  **`RecursiveRequired<T>`**\
    Ensures all properties of a type, including nested ones, are required.

    ```ts
    export type RecursiveRequired<T> = Required<{
      [K in keyof T]: RecursiveRequired<T[K]>;
    }>;
    ```


2.  **`RecursiveAtLeastOne<T>`**\
    Ensures at least one property of a type, including nested ones, is defined.

    ```ts
    export type RecursiveAtLeastOne<T> = T extends object
      ? {
          [K in keyof T]: Pick<T, K> & RecursiveAtLeastOne<Omit<T, K>>;
        }[keyof T]
      : T;
    ```

***
