Options
All
  • Public
  • Public/Protected
  • All
Menu

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

  • 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: string

      The HTML selector which identifies draggable elements

      dropSelector: string

      The HTML selector which identifies drop targets

      permissions: any

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

      callbacks: any

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

      Methods

      • Bind the DragDrop controller to an HTML application

        Parameters

        • html: HTMLElement

          The HTML element to which the handler is bound

        Returns DragDrop

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

      • _handleDragStart(event: DragEvent): void
      • Handle the start of a drag workflow

        Parameters

        • event: DragEvent

          The drag event being handled

        Returns void

      • _handleDragOver(event: DragEvent): boolean
      • Handle a dragged element over a droppable target

        Parameters

        • event: DragEvent

          The drag event being handled

        Returns boolean

      • _handleDrop(event: DragEvent): any
      • Handle a dragged element dropped on a droppable target

        Parameters

        • event: DragEvent

          The drag event being handled

        Returns any

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

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

        Returns HTMLElement