Class DragDrop

A controller class for managing drag and drop workflows within an Application instance. The controller manages the following actions: dragstart, dragover, drop.

Example: Activate drag-and-drop handling for a certain set of elements

const dragDrop = new DragDrop({
  dragSelector: ".item",
  dropSelector: ".items",
  permissions: { dragstart: this._canDragStart.bind(this), drop: this._canDragDrop.bind(this) },
  callbacks: { dragstart: this._onDragStart.bind(this), drop: this._onDragDrop.bind(this) }
});
dragDrop.bind(html);

Constructors

constructor

Properties

callbacks dragSelector dropSelector permissions

Accessors

implementation

Methods

bind callback can _handleDragEnd _handleDragEnter _handleDragLeave _handleDragOver _handleDragStart _handleDrop createDragImage

Constructors

constructor

Properties

callbacks

callbacks: Record<
    | "dragstart"
    | "drop"
    | "dragover"
    | "dragenter"
    | "dragleave"
    | "dragend",
    (event: DragEvent) => void,
>

A set of callback functions for each action of the drag & drop workflow.

dragSelector

dragSelector: null | string

The HTML selector which identifies draggable elements.

dropSelector

dropSelector: null | string

The HTML selector which identifies drop targets.

permissions

permissions: Record<"dragstart" | "drop", (selector: string) => boolean>

A set of functions to control authorization to begin drag workflows, and drop content.

Accessors

Staticimplementation

  • get implementation(): typeof DragDrop

    Retrieve the configured DragDrop implementation.

    Returns typeof DragDrop

Methods

bind

  • bind(html: HTMLElement): DragDrop

    Bind the DragDrop controller to an HTML application

    Parameters

    • html: HTMLElement

      The HTML element to which the handler is bound

    Returns DragDrop

callback

  • callback(event: DragEvent, action: string): any

    Execute a callback function associated with a certain action in the workflow

    Parameters

    • event: DragEvent

      The drag event being handled

    • action: string

      The action being attempted

    Returns any

can

  • can(action: string, selector: string): boolean

    Test whether the current user has permission to perform a step of the workflow

    Parameters

    • action: string

      The action being attempted

    • selector: string

      The selector being targeted

    Returns boolean

    Can the action be performed?

Protected_handleDragEnd

  • _handleDragEnd(event: DragEvent): void
    Protected

    Handle a drag workflow ending for any reason.

    Parameters

    • event: DragEvent

      The drag event.

    Returns void

Protected_handleDragEnter

  • _handleDragEnter(event: DragEvent): void
    Protected

    Handle entering a drop target while dragging.

    Parameters

    • event: DragEvent

      The drag event.

    Returns void

Protected_handleDragLeave

  • _handleDragLeave(event: DragEvent): void
    Protected

    Handle leaving a drop target while dragging.

    Parameters

    • event: DragEvent

      The drag event.

    Returns void

Protected_handleDragOver

  • _handleDragOver(event: DragEvent): boolean
    Protected

    Handle a dragged element over a droppable target

    Parameters

    • event: DragEvent

      The drag event being handled

    Returns boolean

Protected_handleDragStart

  • _handleDragStart(event: DragEvent): void
    Protected

    Handle the start of a drag workflow

    Parameters

    • event: DragEvent

      The drag event being handled

    Returns void

Protected_handleDrop

  • _handleDrop(event: DragEvent): any
    Protected

    Handle a dragged element dropped on a droppable target

    Parameters

    • event: DragEvent

      The drag event being handled

    Returns any

StaticcreateDragImage

  • createDragImage(
        img: HTMLImageElement,
        width: number,
        height: number,
    ): HTMLDivElement

    A helper to create an image preview element for use during HTML element dragging.

    Parameters

    • img: HTMLImageElement
    • width: number
    • height: number

    Returns HTMLDivElement

Settings

Member Visibility

On This Page

Constructors
Properties
Accessors
Methods