CngxDialogDraggable
projects/common/dialog/draggable/dialog-draggable.directive.ts
Import#
import { CngxDialogDraggable } from '@cngx/common/dialog'
Description#
Opt-in drag behavior for CngxDialog.
Uses Pointer Events for unified mouse/touch handling. Position is exposed
as CSS custom properties --cngx-dialog-x and --cngx-dialog-y - the
consumer applies the transform via CSS.
Keyboard-based moving is mandatory for accessibility:
- Arrow keys move 10px
- Shift + Arrow moves 50px
- Home resets to origin
Keys move the dialog only while the handle element itself has focus -
arrows inside form fields keep moving the caret. Without an explicit
[handle] the dialog element becomes focusable (tabindex="0") and is
the keyboard drag surface.
<dialog cngxDialog cngxDialogDraggable>
<div class="dialog-header" #handle>Title</div>
…
</dialog>dialog[cngxDialogDraggable] {
transform: translate(var(--cngx-dialog-x, 0px), var(--cngx-dialog-y, 0px));
}Metadata#
Host#
Index#
Properties
Inputs#
Snap position to a grid in pixels.
When set to a positive number, the dialog position snaps to the nearest
grid increment. When snapMode is 'live', snapping happens during drag.
When 'release', position is free during drag and snaps on pointer up.
0HTMLElement | undefinedHandle element for initiating drag. If not set, entire dialog is the handle.
"live" | "release"When to apply grid snapping.
'live'- position snaps continuously during drag (default)'release'- position is free during drag, snaps on pointer up
'live'Instance Properties#
HostBindings#
| Binding | Expression |
|---|---|
[style.--cngx-dialog-x] | cssX() |
[style.--cngx-dialog-y] | cssY() |
[class.cngx-dialog--dragging] | isDragging() |