API: Core

DraggableDirective

Wraps native HTML5 Drag and Drop (dragstart/dragend/dragenter/dragleave/dragover/ drop).

Overview

Wraps native HTML5 Drag and Drop (dragstart/dragend/dragenter/dragleave/dragover/ drop). This is pointer-only, low-level infrastructure — native browser drag-and-drop is not keyboard-operable by design, and this directive does not attempt to provide a keyboard alternative. Applications that need keyboard/AT-accessible reordering should provide an alternative interaction (e.g. move-up/move-down buttons) alongside this.

Kind: Directive
Source: packages/core/src/drag-drop/draggable.directive.ts:38

Selector

[qzDraggable]

Inputs

Input	Type	Default	Description
`qzDraggable`	`string \| DragDropConfig`	`{}`	Configuration object
`qzDraggableData`	`unknown`	`undefined`	Data to transfer during drag
`qzDraggableType`	`string`	`'default'`	Drag type for categorization
`qzDraggableDisabled`	`unknown`	`false`	Whether dragging is disabled Transform `booleanAttribute`; reads as `boolean`.
`qzDraggableHandle`	`string \| null`	`null`	Drag handle selector

Outputs

Output	Payload	Description
`qzDragStart`	`QzDragInfo`	Emitted when drag starts
`qzDragEnd`	`QzDragEndInfo`	Emitted when drag ends

Properties

Name	Type	Description
`readonly isDragging`	`WritableSignal<boolean>`
`readonly isDisabled`	`Signal<boolean>`	An explicit input wins; the object config remains a convenient shorthand.

Public methods

onDragStart

onDragStart(event: DragEvent): void

Parameter	Type	Optional	Description
`event`	`DragEvent`

onDragEnd

onDragEnd(event: DragEvent): void

Parameter	Type	Optional	Description
`event`	`DragEvent`