Home Reference Source
public class | source

Draggable

This is the core draggable library that does the heavy lifting

Static Member Summary

Static Public Members
public static

Default plugins draggable uses

Constructor Summary

Public Constructor
public

constructor(containers: HTMLElement[] | NodeList | HTMLElement, options: Object)

Draggable constructor.

Member Summary

Public Members
public
public
public
public

Current drag state

public

Draggables event emitter

public
public
public

mirror: *

public

options: {...defaultOptions: Object, ...options: Object, "classes": *, "announcements": *}

public
public
public

plugins: Plugin[]

Active plugins

public

Active sensors

public

source: *

public

Method Summary

Public Methods
public

addContainer(containers: ...HTMLElement): Draggable

Adds container to this draggable instance

public

addPlugin(plugins: ...typeof Plugin): Draggable

Adds plugin to this draggable instance.

public

addSensor(sensors: ...typeof Sensor): Draggable

Adds sensors to this draggable instance.

public

Destroys Draggable instance.

public

Returns class name for class identifier

public

getDraggableElements(): HTMLElement[]

Returns all draggable elements

public

getDraggableElementsForContainer(container: HTMLElement): HTMLElement[]

Returns draggable elements for a given container, excluding the mirror and original source element if present

public

Returns true if this draggable instance is currently dragging

public

off(type: String, callback: Function): Draggable

Removes listener from draggable

public

on(type: String, callbacks: ...Function): Draggable

Adds listener for draggable events

public

removeContainer(containers: ...HTMLElement): Draggable

Removes container from this draggable instance

public

removePlugin(plugins: ...typeof Plugin): Draggable

Removes plugins that are already attached to this draggable instance.

public

removeSensor(sensors: ...typeof Sensor): Draggable

Removes sensors that are already attached to this draggable instance.

public

Triggers draggable event

Private Methods
private

[getAppendableContainer](options: Object): HTMLElement

Returns appendable container for mirror based on the appendTo option

private

[onDragMove](event: Event)

Drag move handler

private

[onDragPressure](event: Event)

Drag pressure handler

private

[onDragStart](event: Event)

Drag start handler

private

[onDragStop](event: Event)

Drag stop handler

Static Public Members

public static Plugins: Object source

Default plugins draggable uses

Properties:

NameTypeAttributeDescription
Plugins Object
Plugins.Announcement Announcement
Plugins.Focusable Focusable
Plugins.Mirror Mirror
Plugins.Scrollable Scrollable

Public Constructors

public constructor(containers: HTMLElement[] | NodeList | HTMLElement, options: Object) source

Draggable constructor.

Params:

NameTypeAttributeDescription
containers HTMLElement[] | NodeList | HTMLElement

Draggable containers

options Object

Options for draggable

Public Members

public containers: undefined[] source

public currentOver: * source

public currentOverContainer: * source

public dragging: Boolean source

Current drag state

Properties:

NameTypeAttributeDescription
dragging *

public emitter: Emitter source

Draggables event emitter

Properties:

NameTypeAttributeDescription
emitter *

public lastPlacedContainer: * source

public lastPlacedSource: * source

public mirror: * source

public options: {...defaultOptions: Object, ...options: Object, "classes": *, "announcements": *} source

public originalSource: * source

public placedTimeoutID: * source

public plugins: Plugin[] source

Active plugins

Properties:

NameTypeAttributeDescription
plugins *

public sensors: Sensor[] source

Active sensors

Properties:

NameTypeAttributeDescription
sensors *

public source: * source

public sourceContainer: * source

Public Methods

public addContainer(containers: ...HTMLElement): Draggable source

Adds container to this draggable instance

Params:

NameTypeAttributeDescription
containers ...HTMLElement

Containers you want to add to draggable

Return:

Draggable

Example:

draggable.addContainer(document.body)

public addPlugin(plugins: ...typeof Plugin): Draggable source

Adds plugin to this draggable instance. This will end up calling the attach method of the plugin

Params:

NameTypeAttributeDescription
plugins ...typeof Plugin

Plugins that you want attached to draggable

Return:

Draggable

Example:

draggable.addPlugin(CustomA11yPlugin, CustomMirrorPlugin)

public addSensor(sensors: ...typeof Sensor): Draggable source

Adds sensors to this draggable instance. This will end up calling the attach method of the sensor

Params:

NameTypeAttributeDescription
sensors ...typeof Sensor

Sensors that you want attached to draggable

Return:

Draggable

Example:

draggable.addSensor(ForceTouchSensor, CustomSensor)

public destroy() source

Destroys Draggable instance. This removes all internal event listeners and deactivates sensors and plugins

public getClassNameFor(name: String): String | null source

Returns class name for class identifier

Params:

NameTypeAttributeDescription
name String

Name of class identifier

Return:

String | null

public getDraggableElements(): HTMLElement[] source

Returns all draggable elements

Return:

HTMLElement[]

public getDraggableElementsForContainer(container: HTMLElement): HTMLElement[] source

Returns draggable elements for a given container, excluding the mirror and original source element if present

Params:

NameTypeAttributeDescription
container HTMLElement

Return:

HTMLElement[]

public isDragging(): Boolean source

Returns true if this draggable instance is currently dragging

Return:

Boolean

public off(type: String, callback: Function): Draggable source

Removes listener from draggable

Params:

NameTypeAttributeDescription
type String

Event name

callback Function

Event callback

Return:

Draggable

Example:

draggable.off('drag:start', handlerFunction);

public on(type: String, callbacks: ...Function): Draggable source

Adds listener for draggable events

Params:

NameTypeAttributeDescription
type String

Event name

callbacks ...Function

Event callbacks

Return:

Draggable

Example:

draggable.on('drag:start', (dragEvent) => dragEvent.cancel());

public removeContainer(containers: ...HTMLElement): Draggable source

Removes container from this draggable instance

Params:

NameTypeAttributeDescription
containers ...HTMLElement

Containers you want to remove from draggable

Return:

Draggable

Example:

draggable.removeContainer(document.body)

public removePlugin(plugins: ...typeof Plugin): Draggable source

Removes plugins that are already attached to this draggable instance. This will end up calling the detach method of the plugin

Params:

NameTypeAttributeDescription
plugins ...typeof Plugin

Plugins that you want detached from draggable

Return:

Draggable

Example:

draggable.removePlugin(MirrorPlugin, CustomMirrorPlugin)

public removeSensor(sensors: ...typeof Sensor): Draggable source

Removes sensors that are already attached to this draggable instance. This will end up calling the detach method of the sensor

Params:

NameTypeAttributeDescription
sensors ...typeof Sensor

Sensors that you want attached to draggable

Return:

Draggable

Example:

draggable.removeSensor(TouchSensor, DragSensor)

public trigger(event: AbstractEvent): Draggable source

Triggers draggable event

Params:

NameTypeAttributeDescription
event AbstractEvent

Event instance

Return:

Draggable

Example:

draggable.trigger(event);

Private Methods

private [getAppendableContainer](options: Object): HTMLElement source

Returns appendable container for mirror based on the appendTo option

Params:

NameTypeAttributeDescription
options Object
options.source HTMLElement

Current source

Return:

HTMLElement

private [onDragMove](event: Event) source

Drag move handler

Params:

NameTypeAttributeDescription
event Event

DOM Drag event

private [onDragPressure](event: Event) source

Drag pressure handler

Params:

NameTypeAttributeDescription
event Event

DOM Drag event

private [onDragStart](event: Event) source

Drag start handler

Params:

NameTypeAttributeDescription
event Event

DOM Drag event

private [onDragStop](event: Event) source

Drag stop handler

Params:

NameTypeAttributeDescription
event Event

DOM Drag event