Class DragDrop

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

See

Application

Param

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

Properties

dragSelector dropSelector permissions callbacks

Methods

bind callback can _handleDragStart _handleDragOver _handleDrop

Properties

dragSelector

dragSelector: string

The HTML selector which identifies draggable elements

dropSelector

dropSelector: string

The HTML selector which identifies drop targets

permissions

permissions: Object

A set of permission checking functions for each action of the Drag and Drop workflow

callbacks

callbacks: Object

A set of callback functions for each action of the Drag and Drop workflow

Methods

bind

  • bind(html): 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, action): 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, selector): 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?

Private _handleDragStart

  • _handleDragStart(event): void
  • Private

    Handle the start of a drag workflow

    Parameters

    • event: DragEvent

      The drag event being handled

    Returns void

Private _handleDragOver

  • _handleDragOver(event): boolean
  • Private

    Handle a dragged element over a droppable target

    Parameters

    • event: DragEvent

      The drag event being handled

    Returns boolean

Private _handleDrop

  • _handleDrop(event): any
  • Private

    Handle a dragged element dropped on a droppable target

    Parameters

    • event: DragEvent

      The drag event being handled

    Returns any

Settings

Member Visibility

Theme

On This Page

dragSelectordropSelectorpermissionscallbacksbindcallbackcan_handleDragStart_handleDragOver_handleDrop