Skip to main content
cngx-src documentation

CngxDialogDraggable

DirectivePrimaryv0.1.0WCAG AA

projects/common/dialog/draggable/dialog-draggable.directive.ts

GitHub

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
<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));
}

https://cngxjs.github.io/cngx/examples/#/common/dialog/alert-dialog https://cngxjs.github.io/cngx/examples/#/common/dialog/bottom-sheet https://cngxjs.github.io/cngx/examples/#/common/dialog/cngxdialogopener-programmatic https://cngxjs.github.io/cngx/examples/#/common/dialog/draggable-dialog https://cngxjs.github.io/cngx/examples/#/common/dialog/fully-declarative https://cngxjs.github.io/cngx/examples/#/common/dialog/grid-snap-live-vs-release https://cngxjs.github.io/cngx/examples/#/common/dialog/nested-dialogs-cngxdialogstack https://cngxjs.github.io/cngx/examples/#/common/dialog/non-modal-panel https://cngxjs.github.io/cngx/examples/#/common/dialog/programmatic-control https://cngxjs.github.io/cngx/examples/#/common/dialog/template-directives

Related#

Metadata#

Selector
[cngxDialogDraggable]
Export as
cngxDialogDraggable

Host#

Bound classes
cngx-dialog--dragging ← isDragging
Bound styles
--cngx-dialog-x ← cssX --cngx-dialog-y ← cssY

Index#

Properties

isDraggingposition

Inputs

constrainToViewportgridSizehandlesnapMode

Derived State

cssXcssY

HostBindings

style.--cngx-dialog-xstyle.--cngx-dialog-yclass.cngx-dialog--dragging

Inputs#

constrainToViewport#
input()

Clamp position to viewport bounds.

default false
gridSize#
input()

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.

default 0
handle#HTMLElement | undefined
input()

Handle element for initiating drag. If not set, entire dialog is the handle.

snapMode#"live" | "release"
input()

When to apply grid snapping.

  • 'live' - position snaps continuously during drag (default)
  • 'release' - position is free during drag, snaps on pointer up
default 'live'

Instance Properties#

isDragging#unknown
Readonly

Whether a drag operation is in progress.

this.draggingState.asReadonly()
position#unknown
Readonly

Current offset position.

this.positionState.asReadonly()

HostBindings#

BindingExpression
[style.--cngx-dialog-x]cssX()
[style.--cngx-dialog-y]cssY()
[class.cngx-dialog--dragging]isDragging()
Enter to selectArrow Down Arrow Up to navigateEsc to close