An object which manages a drag-drop operation.

A drag object dispatches four different events to drop targets:

  • 'lm-dragenter' - Dispatched when the mouse enters the target element. This event must be canceled in order to receive any of the other events.

  • 'lm-dragover' - Dispatched when the mouse moves over the drop target. It must cancel the event and set the dropAction to one of the supported actions in order to receive drop events.

  • 'lm-dragleave' - Dispatched when the mouse leaves the target element. This includes moving the mouse into child elements.

  • 'lm-drop'- Dispatched when the mouse is released over the target element when the target indicates an appropriate drop action. If the event is canceled, the indicated drop action is returned to the initiator through the resolved promise.

A drag operation can be terminated at any time by pressing Escape or by disposing the drag object.

A drag object has the ability to automatically scroll a scrollable element when the mouse is hovered near one of its edges. To enable this, add the data-lm-dragscroll attribute to any element which the drag object should consider for scrolling.

Notes

This class is designed to be used when dragging and dropping custom data within a single application. It is not a replacement for the native drag-drop API. Instead, it provides an API which allows drag operations to be initiated programmatically and enables the transfer of arbitrary non-string objects; features which are not possible with the native drag-drop API.

Implements

Constructors

Properties

_currentElement: null | Element = null
_currentTarget: null | Element = null
_disposed: boolean = false
_dropAction: DropAction = 'none'
_override: null | IDisposable = null
_promise: null | Promise<DropAction> = null
_resolve: null | ((value) => void) = null

Type declaration

    • (value): void
    • Parameters

      Returns void

_scrollTarget: null | IScrollTarget = null
document: Document | ShadowRoot

The target document for dragging events.

dragImage: null | HTMLElement

The drag image element for the drag object.

mimeData: MimeData

The mime data for the drag object.

proposedAction: DropAction

The proposed drop action for the drag object.

source: any

Get the drag source for the drag object.

supportedActions: SupportedActions

The supported drop actions for the drag object.

Accessors

Methods

  • Attach the drag image element at the specified location.

    This is a no-op if there is no drag image element.

    Parameters

    • clientX: number
    • clientY: number

    Returns void

  • Detach the drag image element from the DOM.

    This is a no-op if there is no drag image element.

    Returns void

  • Handle the DOM events for the drag operation.

    Parameters

    • event: Event

      The DOM event sent to the drag object.

      Notes

      This method implements the DOM EventListener interface and is called in response to events on the document. It should not be called directly by user code.

    Returns void

  • Move the drag image element to the specified location.

    This is a no-op if there is no drag image element.

    Parameters

    • clientX: number
    • clientY: number

    Returns void

  • Start the drag operation at the specified client position.

    Parameters

    • clientX: number

      The client X position for the drag start.

    • clientY: number

      The client Y position for the drag start.

    Returns Promise<DropAction>

    A promise which resolves to the result of the drag.

    Notes

    If the drag has already been started, the promise created by the first call to start is returned.

    If the drag operation has ended, or if the drag object has been disposed, the returned promise will resolve to 'none'.

    The drag object will be automatically disposed when drag operation completes. This means Drag objects are for single-use only.

    This method assumes the left mouse button is already held down.