DragDrop

DragDrop

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

Constructor

new DragDrop(dragSelector, dropSelector, permissions, callbacks)

Source:
See:
Example
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);
Parameters:
Name Type Description
dragSelector string

The CSS selector used to target draggable elements.

dropSelector string

The CSS selector used to target viable drop targets.

permissions Object.<string, function()>

An object of permission test functions for each action

callbacks Object.<string, function()>

An object of callback functions for each action

Members

callbacks :Object

Source:

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

Type:
  • Object

dragSelector :string

Source:

The HTML selector which identifies draggable elements

Type:
  • string

dropSelector :string

Source:

The HTML selector which identifies drop targets

Type:
  • string

permissions :Object

Source:

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

Type:
  • Object

Methods

bind(html)

Source:

Bind the DragDrop controller to an HTML application

Parameters:
Name Type Description
html HTMLElement

The HTML element to which the handler is bound

callback(event, action)

Source:

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

Parameters:
Name Type Description
event DragEvent

The drag event being handled

action string

The action being attempted

can(action, selector) → {boolean}

Source:

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

Parameters:
Name Type Description
action string

The action being attempted

selector string

The selector being targeted

Returns:

Can the action be performed?

Type
boolean