Back to Draggable

Drag event

src/Draggable/DragEvent/README.md

1.2.16.5 KB
Original Source

Drag event

DragEvent

The base event for all Drag events that Draggable emits.

SpecificationDragEvent
InterfaceDragEvent
Cancelablefalse
Cancel action-
typedrag

API

dragEvent.source: HTMLElement
Read-only property for the source element. This is a straight copy of the originalSource element, which can be moved around in the DOM.

dragEvent.originalSource: String
Read-only property for the original source element that was picked up. This element never moves in the DOM and gets hidden on drag:start.

dragEvent.sourceContainer: String
Read-only property for the source elements container. This would be one of the containers that was passed into Draggable.

dragEvent.sensorEvent: SensorEvent
Read-only property for the original sensor event that triggered this event.

dragEvent.originalEvent: SensorEvent
Read-only property for the original event that triggered the sensor event.

DragStartEvent

DragStartEvent gets triggered by Draggable when drag interaction has started.

SpecificationDragEvent
InterfaceDragStartEvent
Cancelabletrue
Cancel actionPrevents drag start
typedrag:start

DragMoveEvent

DragMoveEvent gets triggered while moving the mouse after the DragStartEvent has triggered.

SpecificationDragEvent
InterfaceDragMoveEvent
Cancelablefalse
Cancel action-
typedrag:move

DragOverEvent

DragOverEvent gets triggered when hovering over another draggable element during a drag interaction.

SpecificationDragEvent
InterfaceDragOverEvent
Cancelabletrue
Cancel actionCancels default actions in Sortable and Swappable
typedrag:over

API

dragOverEvent.over: HTMLElement
Read-only property for the draggable element that you are hovering over.

dragOverEvent.overContainer: HTMLElement
Read-only property for the draggable container element that you are hovering over.

DragOutEvent

DragOutEvent gets triggered after a DragOverEvent and indicates that you are leaving a draggable element.

SpecificationDragEvent
InterfaceDragOutEvent
Cancelablefalse
Cancel action-
typedrag:out

API

dragOutEvent.over: HTMLElement
Read-only property for the draggable element that you are leaving.

dragOutEvent.overContainer: HTMLElement
Read-only property for the draggable container element that you are hovering over.

DragOverContainerEvent

DragOverContainerEvent gets triggered when hovering over a container, other than the sourceContainer in DragStartEvent.

SpecificationDragEvent
InterfaceDragOverContainerEvent
Cancelablefalse
Cancel action-
typedrag:over:container

API

dragOverContainerEvent.overContainer: HTMLElement
Read-only property for the draggable container element that you are hovering over.

DragOutContainerEvent

DragOutContainerEvent gets triggered after a DragOverContainerEvent and indicates that you are leaving a draggable container element.

SpecificationDragEvent
InterfaceDragOutContainerEvent
Cancelablefalse
Cancel action-
typedrag:out:container

API

dragOutContainerEvent.overContainer: HTMLElement
Read-only property for the draggable container element that you are leaving.

DragPressureEvent

DragPressureEvent gets triggered before and during drag interactions. This event only fires when the ForceTouchSensor is included as a Sensor and a Force Touch trackpad is used with Safari.

SpecificationDragEvent
InterfaceDragPressureEvent
Cancelablefalse
Cancel action-
typedrag:pressure

API

dragPressureEvent.pressure: HTMLElement
Read-only property for pressure applied on a draggable element. Value ranges from 0.0 (no pressure) to 1.0 (maximum pressure).

DragStopEvent

DragStopEvent gets triggered after DragStartEvent, once drag interactions have completed.

SpecificationDragEvent
InterfaceDragStopEvent
Cancelabletrue
Cancel actionPrevent item from being added where it was dropped
typedrag:stop

DragStoppedEvent

DragStoppedEvent gets triggered after DragStopEvent. This event fires after drag:stop listeners have finished running, the source element removed from the document and draggable classes are removed.

SpecificationDragEvent
InterfaceDragStoppedEvent
Cancelablefalse
Cancel action-
typedrag:stopped