Draggable
Mixin

internal

Mix this into another class to enable drag/drop support.

To use a draggable, it must be associated with an element that contains draggable content:

 let draggable = new MyDraggable({
     dragRootElement : someElement
 });

Once the dragRootElement is assigned, any element inside that root is a candidate for dragging. To limit the allowed element, set the dragSelector config.

 let draggable = new MyDraggable({
     dragRootElement : someElement,
     dragSelector    : '.drag-this'
 });

No results

Configs

Configs are options you supply in a configuration object when creating an instance of this class

dragDocumentListeners : Object

private

The listeners to add to the document during a drag.
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 : Number1

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 : Booleanfalse

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 : Number50

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 : Number5

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

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.
draggingClsSelector : String

A CSS selector to use to ascend from the dragRootElement to find the element that will gain the draggingCls and draggingStartedCls CSS classes.
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.
Parameters
- event : MouseEvent
  
  Pointer event
- element : HTMLElement
  
  Over element
Returns

void
onDragItemMouseLeave : Function
A function to call when the pointer leaves a dragItemSelector.
Parameters
- event : MouseEvent
  
  Pointer event
- element : HTMLElement
  
  Over element
Returns

void
onDragItemMouseMove : Function
A function to call when the pointer moves inside a dragItemSelector.
Parameters
- event : MouseEvent
  
  Pointer event
- element : HTMLElement
  
  Over element
Returns

void

Properties

Properties are getters/setters or publicly accessible variables on this class

isDraggable : Booleantrue

READONLY

static

ADVANCED

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

dragEventer : Events

internal

READONLY

Return the Events instance from which drag events are fired.
draggableCls : String

READONLY

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

READONLY

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

READONLY

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

READONLY

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

READONLY

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

READONLY

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 : HTMLElement

READONLY

The dragSelector item the mouse is currently over.
isDraggable : Booleantrue

READONLY

ADVANCED

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

Functions

Functions are methods available for calling on the class

beforeDrag( drag )

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.
dragDrop( drag )
: Promise

ASYNC

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.
dragEnd( drag )

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.
dragEnterTarget( drag )

This template method is called when the drag enters a target.
dragLeaveTarget( drag, oldTarget )

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

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

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.
onDragMouseDown( event )

private

Grab draggable element on mouse down.
onDragPointerDown( event )

private

Grab draggable element on pointerdown.
onDragTouchStart( event )

private

Events

Events are triggered for certain actions in this class and can be listened for to react to those actions in your code

beforeDragStart

PREVENTABLE

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.
drag

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

This event is fired when a drag gesture is completed due to the user aborting it (with the Escape key) or if the abort method was called.
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.
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 Escape key or if the abort method was called.

Event handlers

Event handlers are callbacks called as a result of certain actions in this class

onBeforeDragStart

PREVENTABLE

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.
onDrag

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

This event is called when a drag gesture is completed due to the user aborting it (with the Escape key) or if the abort method was called.
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.
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 Escape key or if the abort method was called.

Source path

Core/mixin/Draggable.js

Inheritance tree1

Draggable

Draggable Mixin internal

Configs

Parameters

Returns

Parameters

Returns

Parameters

Returns

Properties

Functions

Events

Event handlers

Source path

Inheritance tree1

Contents

Draggable
Mixin

internal