Skip to content
Selenite Logo Selenite Logo Docs

actions

References

autofocus

Re-exports autofocus

autosize

Re-exports autosize

boxSelection

Re-exports boxSelection

BoxSelectionParams

Re-exports BoxSelectionParams

Canvas

Renames and re-exports actions/canvas

checkbox

Re-exports checkbox

Click

Renames and re-exports actions/click

ClickDragOptions

Re-exports ClickDragOptions

clickIfDrag

Re-exports clickIfDrag

clickIfNoDrag

Re-exports clickIfNoDrag

documentListener

Re-exports documentListener

DocumentParams

Re-exports DocumentParams

Drag

Renames and re-exports actions/drag

draggableItem

Re-exports draggableItem

DragItemOptions

Re-exports DragItemOptions

focusTrap

Re-exports focusTrap

FocusTrap

Renames and re-exports actions/focusTrap

gridLines

Re-exports gridLines

horizontalScroll

Re-exports horizontalScroll

Inputs

Renames and re-exports actions/inputs

Keyboard

Renames and re-exports actions/keyboard

keyboardNavigation

Re-exports keyboardNavigation

KeyboardShortcut

Re-exports KeyboardShortcut

keys

Re-exports keys

resizable

Re-exports resizable

ResizeHandleParams

Re-exports ResizeHandleParams

ResizeSide

Re-exports ResizeSide

Scroll

Renames and re-exports actions/scroll

scrollIntoView

Re-exports scrollIntoView

shortcut

Re-exports shortcut

Shortcut

Renames and re-exports actions/shortcut

ShortcutSettings

Re-exports ShortcutSettings

shortcutToString

Re-exports shortcutToString

Transform

Re-exports Transform

Interfaces

Action()<Element, Parameter, Attributes>

Actions are functions that are called when an element is created. You can use this interface to type such actions. The following example defines an action that only works on <div> elements and optionally accepts a parameter which it has a default value for:

export const myAction: Action<HTMLDivElement, { someProperty: boolean } | undefined> = (node, param = { someProperty: true }) => {
  // ...
}

Action<HTMLDivElement> and Action<HTMLDivElement, undefined> both signal that the action accepts no parameters.

You can return an object with methods update and destroy from the function and type which additional attributes and events it has. See interface ActionReturn for more details.

Docs: https://svelte.dev/docs/svelte-action

Type Parameters

• Element = HTMLElement

• Parameter = undefined

• Attributes extends Record<string, any> = Record<never, any>

interface Action<Node>(...args): void | ActionReturn<Parameter, Attributes>

Actions are functions that are called when an element is created. You can use this interface to type such actions. The following example defines an action that only works on <div> elements and optionally accepts a parameter which it has a default value for:

export const myAction: Action<HTMLDivElement, { someProperty: boolean } | undefined> = (node, param = { someProperty: true }) => {
  // ...
}

Action<HTMLDivElement> and Action<HTMLDivElement, undefined> both signal that the action accepts no parameters.

You can return an object with methods update and destroy from the function and type which additional attributes and events it has. See interface ActionReturn for more details.

Docs: https://svelte.dev/docs/svelte-action

Type Parameters

• Node

Parameters

• …args: undefined extends Parameter ? [Node, Parameter] : [Node, Parameter]

Returns

void | ActionReturn<Parameter, Attributes>

Defined in

tmp/commons/node_modules/@neodrag/svelte/dist/index.d.ts:253

ActionReturn<Parameter, Attributes>

Actions can return an object containing the two properties defined in this interface. Both are optional.

  • update: An action can have a parameter. This method will be called whenever that parameter changes, immediately after Svelte has applied updates to the markup. ActionReturn and ActionReturn<undefined> both mean that the action accepts no parameters.
  • destroy: Method that is called after the element is unmounted

Additionally, you can specify which additional attributes and events the action enables on the applied element. This applies to TypeScript typings only and has no effect at runtime.

Example usage:

interface Attributes {
  newprop?: string;
  'on:event': (e: CustomEvent<boolean>) => void;
}


export function myAction(node: HTMLElement, parameter: Parameter): ActionReturn<Parameter, Attributes> {
  // ...
  return {
    update: (updatedParameter) => {...},
    destroy: () => {...}
  };
}

Docs: https://svelte.dev/docs/svelte-action

Type Parameters

• Parameter = undefined

• Attributes extends Record<string, any> = Record<never, any>

Properties

$$_attributes?
optional $$_attributes: Attributes;

DO NOT USE THIS

This exists solely for type-checking and has no effect at runtime. Set this through the Attributes generic instead.

Defined in

tmp/commons/node_modules/@neodrag/svelte/dist/index.d.ts:233

destroy()?
optional destroy: () => void;
Returns

void

Defined in

tmp/commons/node_modules/@neodrag/svelte/dist/index.d.ts:227

update()?
optional update: (parameter) => void;
Parameters

• parameter: Parameter

Returns

void

Defined in

tmp/commons/node_modules/@neodrag/svelte/dist/index.d.ts:226

Type Aliases

DragAxis

type DragAxis: "both" | "x" | "y" | "none";

Defined in

tmp/commons/node_modules/@neodrag/svelte/dist/index.d.ts:11

DragBounds

type DragBounds:
  | HTMLElement
  | Partial<DragBoundsCoords>
  | "parent"
  | "body"
| string & Record<never, never>;

Defined in

tmp/commons/node_modules/@neodrag/svelte/dist/index.d.ts:12

DragBoundsCoords

type DragBoundsCoords: object;

Type declaration

bottom
bottom: number;

Number of pixels from the bottom of the document

left
left: number;

Number of pixels from left of the document

right: number;

Number of pixels from the right side of document

top
top: number;

Number of pixels from top of the document

Defined in

tmp/commons/node_modules/@neodrag/svelte/dist/index.d.ts:1

DragEventData

type DragEventData: object;

Type declaration

currentNode
currentNode: HTMLElement;

The element being dragged

offsetX
offsetX: number;

How much element moved from its original position horizontally

offsetY
offsetY: number;

How much element moved from its original position vertically

rootNode
rootNode: HTMLElement;

The node on which the draggable is applied

Defined in

tmp/commons/node_modules/@neodrag/svelte/dist/index.d.ts:13

DragOptions

type DragOptions: object;

Type declaration

applyUserSelectHack?
optional applyUserSelectHack: boolean;

Applies user-select: none on <body /> element when dragging, to prevent the irritating effect where dragging doesn’t happen and the text is selected. Applied when dragging starts and removed when it stops.

Can be disabled using this option

Default
true
axis?
optional axis: DragAxis;

Axis on which the element can be dragged on. Valid values: both, x, y, none.

  • both - Element can move in any direction
  • x - Only horizontal movement possible
  • y - Only vertical movement possible
  • none - No movement at all
Default
'both'
bounds?
optional bounds: DragBounds;

Optionally limit the drag area

Accepts parent as prefixed value, and limits it to its parent.

Or, you can specify any selector and it will be bound to that.

Note: We don’t check whether the selector is bigger than the node element. You yourself will have to make sure of that, or it may lead to strange behavior

Or, finally, you can pass an object of type { top: number; right: number; bottom: number; left: number }. These mimic the css top, right, bottom and left, in the sense that bottom starts from the bottom of the window, and right from right of window. If any of these properties are unspecified, they are assumed to be 0.

cancel?
optional cancel: string | HTMLElement | HTMLElement[];

CSS Selector of an element or multiple elements inside the parent node(on which use:draggable is applied).

Can be an element or elements too. If it is provided, Trying to drag inside the cancel element(s) will prevent dragging.

Default
undefined
defaultClass?
optional defaultClass: string;

Class to apply on the element on which use:draggable is applied. Note that if handle is provided, it will still apply class on the element to which this action is applied, NOT the handle

defaultClassDragged?
optional defaultClassDragged: string;

Class to apply on the element if it has been dragged at least once.

Default
'neodrag-dragged'
defaultClassDragging?
optional defaultClassDragging: string;

Class to apply on the element when it is dragging

Default
'neodrag-dragging'
defaultPosition?
optional defaultPosition: object;

Offsets your element to the position you specify in the very beginning. x and y should be in pixels

defaultPosition.x
x: number;
defaultPosition.y
y: number;
disabled?
optional disabled: boolean;

Disables dragging altogether.

Default
false
gpuAcceleration?
optional gpuAcceleration: boolean;

If true, uses translate3d instead of translate to move the element around, and the hardware acceleration kicks in.

true by default, but can be set to false if blurry text issue occur

Default
true
grid?
optional grid: [number, number];

Applies a grid on the page to which the element snaps to when dragging, rather than the default continuous grid.

Note: If you’re programmatically creating the grid, do not set it to [0, 0] ever, that will stop drag at all. Set it to undefined.

Default
undefined
handle?
optional handle: string | HTMLElement | HTMLElement[];

CSS Selector of an element or multiple elements inside the parent node(on which use:draggable is applied). Can be an element or elements too.

If it is provided, Only clicking and dragging on this element will allow the parent to drag, anywhere else on the parent won’t work.

Default
undefined
ignoreMultitouch?
optional ignoreMultitouch: boolean;

Ignores touch events with more than 1 touch. This helps when you have multiple elements on a canvas where you want to implement pinch-to-zoom behaviour.

Default
false
legacyTranslate?
optional legacyTranslate: boolean;

If false, uses the new translate property instead of transform: translate(); to move the element around.

At present this is true by default, but will be changed to false in a future major version.

Default
true
onDrag()?
optional onDrag: (data) => void;

Fires when dragging is going on

Parameters

• data: DragEventData

Returns

void

onDragEnd()?
optional onDragEnd: (data) => void;

Fires when dragging ends

Parameters

• data: DragEventData

Returns

void

onDragStart()?
optional onDragStart: (data) => void;

Fires when dragging start

Parameters

• data: DragEventData

Returns

void

position?
optional position: object;

Control the position manually with your own state

By default, the element will be draggable by mouse/finger, and all options will work as default while dragging.

But changing the position option will also move the draggable around. These parameters are reactive, so using Svelte’s reactive variables as values for position will work like a charm.

Note: If you set disabled: true, you’ll still be able to move the draggable through state variables. Only the user interactions won’t work

position.x
x: number;
position.y
y: number;
recomputeBounds?
optional recomputeBounds: object;

When to recalculate the dimensions of the bounds element.

By default, bounds are recomputed only on dragStart. Use this options to change that behavior.

Default
'{ dragStart: true, drag: false, dragEnd: false }'
recomputeBounds.drag?
optional drag: boolean;
recomputeBounds.dragEnd?
optional dragEnd: boolean;
recomputeBounds.dragStart?
optional dragStart: boolean;
transform()?
optional transform: ({ offsetX, offsetY, rootNode, }) => string | undefined | void;

Custom transform function. If provided, this function will be used to apply the DOM transformations to the root node to move it. Existing transform logic, including gpuAcceleration and legacyTranslate, will be ignored.

You can return a string to apply to a transform property, or not return anything and apply your transformations using rootNode.style.transform = VALUE

Parameters

• { offsetX, offsetY, rootNode, }

• { offsetX, offsetY, rootNode, }.offsetX: number

• { offsetX, offsetY, rootNode, }.offsetY: number

• { offsetX, offsetY, rootNode, }.rootNode: HTMLElement

Returns

string | undefined | void

Default
undefined

Defined in

tmp/commons/node_modules/@neodrag/svelte/dist/index.d.ts:23

Functions

draggable()

function draggable<Node>(...args): void | ActionReturn<undefined | DragOptions, object>

Type Parameters

• Node extends HTMLElement

Parameters

• …args: [Node, DragOptions]

Returns

void | ActionReturn<undefined | DragOptions, object>

Defined in

tmp/commons/node_modules/@neodrag/svelte/dist/index.d.ts:255

handleFocusLeave()

function handleFocusLeave<Node>(...args): void | ActionReturn<(isKeyboard) => void, Record<never, any>>

Type Parameters

• Node extends HTMLElement

Parameters

• …args: [Node, (isKeyboard) => void]

Returns

void | ActionReturn<(isKeyboard) => void, Record<never, any>>

Defined in

tmp/commons/src/lib/actions/index.ts:33

takeFocus()

function takeFocus<Node>(...args): void | ActionReturn<boolean, Record<never, any>>

Type Parameters

• Node extends HTMLElement

Parameters

• …args: [Node, boolean]

Returns

void | ActionReturn<boolean, Record<never, any>>

Defined in

tmp/commons/src/lib/actions/index.ts:72