Class DragTarget

Coordinates pointer dragging from one DOM element into one or more targets.

DragTarget commits at most once. A committed drag either appends the dragged element to the target or replaces the target, depending on action.

Index

Constructors

Properties

dragged targets

Methods

addEventListener getTargetById remoteDrag remoteSettle remoteSwap removeEventListener

Constructors

constructor

new DragTarget(
    dragged: HTMLElement,
    targets: HTMLElement | Iterable<HTMLElement, any, any>,
    action: DragTargetAction,
    animationDuration?: number,
): DragTarget
Creates a drag target interaction.
Parameters
- dragged: HTMLElement
  The element users can drag.
- targets: HTMLElement | Iterable<HTMLElement, any, any>
  One target element, or an iterable of target elements.
- action: DragTargetAction
  The DOM operation to perform when a target accepts the drag.
- animationDuration: number = 200
  The duration of generated animations, in milliseconds.
Returns DragTarget
- Defined in DragTarget/class.ts:43

Properties

`Readonly`dragged

dragged: HTMLElement

The element users can drag.

`Readonly`targets

targets: readonly HTMLElement[]

The target elements that can accept the dragged element.

Methods

addEventListener

addEventListener<K extends keyof DragTargetEventMap>(
    type: K,
    listener: DragTargetEventListenerFor<K> | null,
    options?: boolean | AddEventListenerOptions,
): void
Appends an event listener for events whose type is type.
Type Parameters
- K extends keyof DragTargetEventMap
Parameters
- type: K
  The drag target event type to listen for.
- listener: DragTargetEventListenerFor<K> | null
  The callback or event listener object that receives the event.
- Optionaloptions: boolean | AddEventListenerOptions
  Options that control listener registration.
Returns void
- Defined in DragTarget/class.ts:209

getTargetById

getTargetById(id: string): HTMLElement | undefined
Returns the first target with the given element id.
Parameters
- id: string
  The element id to match.
Returns HTMLElement | undefined
The matching target, or undefined if no target matches.
- Defined in DragTarget/class.ts:198

remoteDrag

remoteDrag(instruction: DragInstruction): void
Replays a drag movement for the managed dragged element.
Parameters
- instruction: DragInstruction
  The dragged element and translate offset to apply.
Returns void
- Defined in DragTarget/class.ts:143

remoteSettle

remoteSettle(event: SettleEventDetail): void
Replays the end of an uncommitted drag operation.
Parameters
- event: SettleEventDetail
  The settle event detail to apply.
Returns void
- Defined in DragTarget/class.ts:185

remoteSwap

remoteSwap(swap: SwapEventDetail): void
Replays a committed drop onto a target.
Parameters
- swap: SwapEventDetail
  The dragged element and target element to commit.
Returns void
- Defined in DragTarget/class.ts:158

removeEventListener

removeEventListener<K extends keyof DragTargetEventMap>(
    type: K,
    listener: DragTargetEventListenerFor<K> | null,
    options?: boolean | EventListenerOptions,
): void
Removes an event listener previously registered with addEventListener.
Type Parameters
- K extends keyof DragTargetEventMap
Parameters
- type: K
  The drag target event type.
- listener: DragTargetEventListenerFor<K> | null
  The callback or event listener object to remove.
- Optionaloptions: boolean | EventListenerOptions
  Options that identify the listener registration.
Returns void
- Defined in DragTarget/class.ts:228