import Draggable from '@shopify/draggable/src/Draggable/Draggable.js'

public class | source

Draggable

This is the core draggable library that does the heavy lifting

Static Member Summary

Static Public Members
public static	Plugins: Object Default plugins draggable uses
public static	Sensors: Object Default sensors draggable uses

Constructor Summary

Public Constructor
public	constructor(containers: HTMLElement[] \| NodeList \| HTMLElement, options: Object) Draggable constructor.

Member Summary

Public Members
public	containers: undefined[]
public	currentOver: *
public	currentOverContainer: *
public	dragging: Boolean Current drag state
public	emitter: Emitter Draggables event emitter
public	lastPlacedContainer: *
public	lastPlacedSource: *
public	options: {...defaultOptions: Object, ...options: Object, "classes": , "announcements": , "exclude": *}
public	originalSource: *
public	placedTimeoutID: *
public	plugins: Plugin[] Active plugins
public	sensors: Sensor[] Active sensors
public	source: *
public	sourceContainer: *

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	destroy() Destroys Draggable instance.
public	getClassNameFor(name: String): String \| null Returns class name for class identifier
public	getClassNamesFor(name: *): String[] Returns class names 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	isDragging(): Boolean 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	trigger(event: AbstractEvent): Draggable Triggers draggable event

Private Methods
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:

Name	Type	Attribute	Description
Plugins	Object
Plugins.Announcement	Announcement
Plugins.Focusable	Focusable
Plugins.Mirror	Mirror
Plugins.Scrollable	Scrollable

public static Sensors: Object source

Default sensors draggable uses

Properties:

Name	Type	Attribute	Description
Sensors	Object
Sensors.MouseSensor	MouseSensor
Sensors.TouchSensor	TouchSensor

Public Constructors

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

Draggable constructor.

Params:

Name	Type	Attribute	Description
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:

Name	Type	Attribute	Description
dragging	*

public emitter: Emitter source

Draggables event emitter

Properties:

Name	Type	Attribute	Description
emitter	*

public lastPlacedContainer: * source

public lastPlacedSource: * source

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

public originalSource: * source

public placedTimeoutID: * source

public plugins: Plugin[] source

Active plugins

Properties:

Name	Type	Attribute	Description
plugins	*

public sensors: Sensor[] source

Active sensors

Properties:

Name	Type	Attribute	Description
sensors	*

public source: * source

public sourceContainer: * source

Public Methods

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

Adds container to this draggable instance

Params:

Name	Type	Attribute	Description
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:

Name	Type	Attribute	Description
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:

Name	Type	Attribute	Description
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:

Name	Type	Attribute	Description
name	String		Name of class identifier

Return:

String | null

public getClassNamesFor(name: *): String[] source

Returns class names for class identifier

Params:

Name	Type	Attribute	Description
name	*

Return:

String[]

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:

Name	Type	Attribute	Description
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:

Name	Type	Attribute	Description
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:

Name	Type	Attribute	Description
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:

Name	Type	Attribute	Description
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:

Name	Type	Attribute	Description
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:

Name	Type	Attribute	Description
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:

Name	Type	Attribute	Description
event	AbstractEvent		Event instance

Return:

Draggable

Example:

draggable.trigger(event);

Private Methods

private [onDragMove](event: Event) source

Drag move handler

Params:

Name	Type	Attribute	Description
event	Event		DOM Drag event

private [onDragPressure](event: Event) source

Drag pressure handler

Params:

Name	Type	Attribute	Description
event	Event		DOM Drag event

private [onDragStart](event: Event) source

Drag start handler

Params:

Name	Type	Attribute	Description
event	Event		DOM Drag event

private [onDragStop](event: Event) source

Drag stop handler

Params:

Name	Type	Attribute	Description
event	Event		DOM Drag event

Draggable

Static Member Summary

Constructor Summary

Member Summary

Method Summary

Static Public Members

public static Plugins: Object source

Properties:

public static Sensors: Object source

Properties:

Public Constructors

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

Params:

Public Members

public containers: undefined[] source

public currentOver: * source

public currentOverContainer: * source

public dragging: Boolean source

Properties:

public emitter: Emitter source

Properties:

public lastPlacedContainer: * source

public lastPlacedSource: * source

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

public originalSource: * source

public placedTimeoutID: * source

public plugins: Plugin[] source

Properties:

public sensors: Sensor[] source

Properties:

public source: * source

public sourceContainer: * source

Public Methods

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

Params:

Return:

Example:

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

Params:

Return:

Example:

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

Params:

Return:

Example:

public destroy() source

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

Params:

Return:

public getClassNamesFor(name: *): String[] source

Params:

Return:

public getDraggableElements(): HTMLElement[] source

Return:

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

Params:

Return:

public isDragging(): Boolean source

Return:

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

Params:

Return:

Example:

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

Params:

Return:

Example:

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

Params:

Return:

Example:

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

Params:

Return:

Example:

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

Params:

Return:

Example:

public trigger(event: AbstractEvent): Draggable source

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