Options
All
  • Public
  • Public/Protected
  • All
Menu

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

Hierarchy

  • DragDrop

Index

Constructors

Properties

Methods

Constructors

constructor

  • new DragDrop(__namedParameters?: { dragSelector: any; dropSelector: any; permissions: {}; callbacks: {} }): DragDrop

  • Parameters

    • __namedParameters: { dragSelector: any; dropSelector: any; permissions: {}; callbacks: {} } = {}
      • dragSelector: any
      • dropSelector: any
      • permissions: {}
        • callbacks: {}

        Returns DragDrop

      Properties

      dragSelector

      dragSelector: string

      The HTML selector which identifies draggable elements

      dropSelector

      dropSelector: string

      The HTML selector which identifies drop targets

      permissions

      permissions: any

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

      callbacks

      callbacks: any

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

      Methods

      bind

      • 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?

      Private _handleDragStart

      • _handleDragStart(event: DragEvent): void

      • Handle the start of a drag workflow

        Parameters

        • event: DragEvent

          The drag event being handled

        Returns void

      Private _handleDragOver

      • _handleDragOver(event: DragEvent): boolean

      • Handle a dragged element over a droppable target

        Parameters

        • event: DragEvent

          The drag event being handled

        Returns boolean

      Private _handleDrop

      • _handleDrop(event: DragEvent): any

      • Handle a dragged element dropped on a droppable target

        Parameters

        • event: DragEvent

          The drag event being handled

        Returns any

      Static createDragImage

      • createDragImage(img: any, width: any, height: any): HTMLElement

      • Parameters

        • img: any
        • width: any
        • height: any

        Returns HTMLElement