Draggable

Configs

A CSS selector to use to ascend from the dragRootElement to find the element that will gain the draggingCls and draggingStartedCls CSS classes.

dragItemOverCls: String

A CSS class to add to items identified by the dragItemSelector when the mouse enters.

dragItemSelector: String

A CSS selector to use to ascend from the drag element to find the element that will gain the draggingItemCls CSS class. If not supplied, the drag element will gain this CSS class.

dragLock: x | y | null

Configure as 'x' to lock dragging to the X axis (the drag will only move horizontally) or 'y' to lock dragging to the Y axis (the drag will only move vertically).

dragMinDistance: Number= 1

The minimum distance a drag must move to be considered a drop and not aborted.

dragProxy: DragProxyConfig | DragProxy

The drag proxy is a helper object that can be used to display feedback during a drag.

dragRootElement: HTMLElement

The outer element where dragging will operate (attach events to it and use as root limit when looking for ancestors).

dragSameTargetDrop: Boolean= false

Set to true to allow a drag to drop on to the same element from which the drag started.

dragSelector: String

A CSS selector used to determine which element(s) can be dragged.

dragSwallowClickTime: Number= 50

The number of milliseconds after a pointerup to ignore click events on the document. This is used to avoid the "up" event itself generating a click on the target.

dragThreshold: Number= 5

The amount of pixels to move pointer/mouse before it counts as a drag operation.

dragTouchStartDelay: Number= 300

The number of milliseconds that must elapse after a touchstart event before it is considered a drag. If movement occurs before this time, the drag is aborted. This is to allow touch swipes and scroll gestures.

dropTargetSelector: String

The CSS selector to use to identify the closest valid target from the event target.

ignoreSelector: String

A CSS selector used to identify child element(s) that should not trigger drag.

onDragItemMouseEnter: function

A function to call when the pointer enters a dragItemSelector.

Parameter	Type	Description
`event`	MouseEvent	Pointer event
`element`	HTMLElement	Over element

Returns: void

onDragItemMouseLeave: function

A function to call when the pointer leaves a dragItemSelector.

Parameter	Type	Description
`event`	MouseEvent	Pointer event
`element`	HTMLElement	Over element

Returns: void

onDragItemMouseMove: function

A function to call when the pointer moves inside a dragItemSelector.

Parameter	Type	Description
`event`	MouseEvent	Pointer event
`element`	HTMLElement	Over element

Returns: void

Properties

Class hierarchy

isDraggable: Boolean= truereadonly

Identifies an object as an instance of Draggable class, or subclass thereof.

isDraggable: Boolean= truereadonlystatic

Identifies an object as an instance of Draggable class, or subclass thereof.

Other

draggableCls: Stringreadonly

The CSS class that is added to the dragRootElement, i.e., 'b-draggable'.

dragging: DragContextreadonly

The current DragContext. This is created immediately on pointerdown but does not become active until some movement occurs. This threshold is configurable.

draggingBodyCls: Stringreadonly

The CSS class to add to the body element as soon as the dragThreshold is reached and an actual drag is in progress.

draggingCls: Stringreadonly

The CSS class to add to the dragRootElement (or draggingClsSelector from there) as soon as the pointerdown event occurs.

draggingItemCls: Stringreadonly

The CSS class to add to the element being dragged as soon as the pointerdown event occurs.

draggingStartedCls: Stringreadonly

The CSS class to add to the dragRootElement (or draggingClsSelector from there) as soon as the dragThreshold is reached and an actual drag is in progress.

overItem: HTMLElementreadonly

The dragSelector item the mouse is currently over.

Functions

beforeDrag

This template method is called when the mousedown of a potential drag operation occurs. This happens before the gesture is known to be a drag, meaning the dragThreshold has not been reached. This method should initialize the DragContext using the set method. Alternatively, this method may return false to prevent the drag operation.

Important: Because no drag has occurred at the time this method is called, only minimal processing should be done (such as initializing the DragContext). Anything more should be done in the dragStart method or in response to the dragStart event which happen only if the user drags the mouse before releasing the mouse button.

Parameter	Type	Description
`drag`	DragContext

dragDrop

This template method is called when the drag operation completes. This occurs on the pointerup event.

This method is not called if the drag is aborted.

Parameter	Type	Description
`drag`	DragContext

dragEnd

This template method is called when the drag operation completes. This occurs on the pointerup event or perhaps a keypress event.

This method is always called, even if the drag is aborted.

Parameter	Type	Description
`drag`	DragContext

dragEnterTarget

This template method is called when the drag enters a target.

Parameter	Type	Description
`drag`	DragContext

dragLeaveTarget

This template method is called when the drag leaves a target.

Parameter	Type	Description
`drag`	DragContext
`oldTarget`	Droppable	The previous value of `drag.target`.

dragOver

This template method is called as the drag moves. This occurs on each mouse/pointer/touchmove event.

Parameter	Type	Description
`drag`	DragContext

dragStart

This template method is called when the drag operation starts. This occurs when the dragThreshold has been reached. Your implementation may return false to prevent the startup of the drag operation.

Parameter	Type	Description
`drag`	DragContext

Events

beforeDragStart

This event is fired prior to starting a drag gesture. This does not occur immediately after the user performs the pointer/mousedown/touchstart but only after the dragThreshold amount of movement has taken place.

The drag is canceled if a listener returns false.

// Adding a listener using the "on" method
draggable.on('beforeDragStart', ({ source, drag, event }) => {

});

Parameter	Type	Description
`source`	Draggable	The draggable instance that fired the event.
`drag`	DragContext	The drag context.
`event`	Event	The browser event.

drag

This event is fired as a drag gesture progresses due to cursor movement.

// Adding a listener using the "on" method
draggable.on('drag', ({ source, drag, event }) => {

});

Parameter	Type	Description
`source`	Draggable	The draggable instance that fired the event.
`drag`	DragContext	The drag context.
`event`	Event	The browser event.

dragCancel

This event is fired when a drag gesture is completed due to the user aborting it (with the ESC key) or if the abort method was called.

// Adding a listener using the "on" method
draggable.on('dragCancel', ({ source, drag, event }) => {

});

Parameter	Type	Description
`source`	Draggable	The draggable instance that fired the event.
`drag`	DragContext	The drag context.
`event`	Event	The browser event.

dragStart

This event is fired when a drag gesture has started. This does not occur immediately after the user performs the pointer/mousedown/touchstart but only after the dragThreshold amount of movement has taken place.

// Adding a listener using the "on" method
draggable.on('dragStart', ({ source, drag, event }) => {

});

Parameter	Type	Description
`source`	Draggable	The draggable instance that fired the event.
`drag`	DragContext	The drag context.
`event`	Event	The browser event.

drop

This event is fired when a drag gesture is completed successfully.

This event is not fired if the drag was aborted by the user pressing the ESC key or if the abort method was called.

// Adding a listener using the "on" method
draggable.on('drop', ({ source, drag, event }) => {

});

Parameter	Type	Description
`source`	Draggable	The draggable instance that fired the event.
`drag`	DragContext	The drag context.
`event`	Event	The browser event.

Event handlers

onBeforeDragStart

This event is called prior to starting a drag gesture. This does not occur immediately after the user performs the pointer/mousedown/touchstart but only after the dragThreshold amount of movement has taken place.

The drag is canceled if a listener returns false.

new Draggable({
    onBeforeDragStart({ source, drag, event }) {

    }
});

Parameter	Type	Description
`source`	Draggable	The draggable instance that fired the event.
`drag`	DragContext	The drag context.
`event`	Event	The browser event.

onDrag

This event is called as a drag gesture progresses due to cursor movement.

new Draggable({
    onDrag({ source, drag, event }) {

    }
});

Parameter	Type	Description
`source`	Draggable	The draggable instance that fired the event.
`drag`	DragContext	The drag context.
`event`	Event	The browser event.

onDragCancel

This event is called when a drag gesture is completed due to the user aborting it (with the ESC key) or if the abort method was called.

new Draggable({
    onDragCancel({ source, drag, event }) {

    }
});

Parameter	Type	Description
`source`	Draggable	The draggable instance that fired the event.
`drag`	DragContext	The drag context.
`event`	Event	The browser event.

onDragStart

This event is called when a drag gesture has started. This does not occur immediately after the user performs the pointer/mousedown/touchstart but only after the dragThreshold amount of movement has taken place.

new Draggable({
    onDragStart({ source, drag, event }) {

    }
});

Parameter	Type	Description
`source`	Draggable	The draggable instance that fired the event.
`drag`	DragContext	The drag context.
`event`	Event	The browser event.

onDrop

This event is called when a drag gesture is completed successfully.

This event is not called if the drag was aborted by the user pressing the ESC key or if the abort method was called.

new Draggable({
    onDrop({ source, drag, event }) {

    }
});

Parameter	Type	Description
`source`	Draggable	The draggable instance that fired the event.
`drag`	DragContext	The drag context.
`event`	Event	The browser event.