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.

import { RedropTypes as rdt } from "redrop-dnd";

const dndManager = new Redrop();

const draggableItem: rdt.DraggableElements = dndManager.makeDraggable("#draggableElm", draggableOptions);

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

For more information about the methods pelase check ReDrop

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

For explanation check - Options

BaseDraggableType Defines the structure and behaviour of a draggable element, including identifiers, modifiers, accessibility options, and associated data.

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;
};

DraggableOptions Represents customizable options for a draggable element.
```
export type DraggableOptions = RecursiveAtLeastOne<BaseDraggableType>;
```
Draggables A map containing draggable configurations associated with their elements.
```
export type Draggables = Map<Redrop, Map<Element, BaseDraggableType>>;
```

DraggableElement A specialised HTML element with draggable capabilities.

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

DraggableElements A collection of draggable elements with event handling.

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

DraggableInfo Provides metadata about a specific draggable element.

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

TransferOptions Configures options for transferring draggable elements during operations.

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

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

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;
};

DroppableOptions Represents customizable options for a droppable element.
```
export type DroppableOptions = RecursiveAtLeastOne<BaseDroppableType>;
```
Droppables A map containing droppable configurations associated with their elements.
```
export type Droppables = Map<Redrop, Map<Element, BaseDroppableType>>;
```

DroppableElement A specialized HTML element with droppable capabilities.

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

DroppableElements A collection of droppable elements with event handling.

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

DroppableInfo Provides metadata about a specific droppable element.

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

GetDragOverElement Represents an element being dragged over during an operation.

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

Events Types

EventAbortController Provides methods to manage and abort drag-and-drop event listeners.
```
export type EventAbortController = {
  abort: () => void;
  signal: AbortSignal;
};
```

DragEventName Enumerates drag event names.

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

DropEventName Enumerates drop event names.

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

DragEventCallback A callback function for handling drag events.
```
export type DragEventCallback = (event: DragEvent) => void;
```

DragListeners Defines a set of drag event listeners.

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

DropEventCallback A callback function for handling drop events.
```
export type DropEventCallback = (event: DragEvent) => void;
```

DropListeners Defines a set of drop event listeners.

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

OnDragEvent A handler for custom drag events.

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

OnDraggablesEvent A handler for events on multiple draggable elements.
```
export type OnDraggablesEvent = (event: CustomEvent) => void;
```

OnDropEvent A handler for custom drop events.

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

OnDroppablesEvent A handler for events on multiple droppable elements.
```
export type OnDroppablesEvent = (event: CustomEvent) => void;
```

Global Types

BaseGlobalType Defines global configurations shared across the library.

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

GlobalOptions Represents customizable global options for the library.

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

ExtendedElement Represents a union of draggable and droppable elements.
```
export type ExtendedElement = DraggableElement | DroppableElement;
```

Drag and Drop State Type

DndState Represents the state of drag-and-drop operations.

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

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

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

Utils Types

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

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

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

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

PreviousDND State

Last updated 8 months ago