Type Alias DragOptions

DragOptions: {
    applyUserSelectHack?: boolean;
    axis?: DragAxis;
    bounds?: DragBounds;
    cancel?: string | HTMLElement | HTMLElement[];
    defaultClass?: string;
    defaultClassDragged?: string;
    defaultClassDragging?: string;
    defaultPosition?: {
        x: number;
        y: number;
    };
    disabled?: boolean;
    gpuAcceleration?: boolean;
    grid?: [number, number];
    handle?: string | HTMLElement | HTMLElement[];
    ignoreMultitouch?: boolean;
    legacyTranslate?: boolean;
    onDrag?: ((data: DragEventData) => void);
    onDragEnd?: ((data: DragEventData) => void);
    onDragStart?: ((data: DragEventData) => void);
    position?: {
        x: number;
        y: number;
    };
    recomputeBounds?: {
        drag?: boolean;
        dragEnd?: boolean;
        dragStart?: boolean;
    };
    transform?: (({ offsetX, offsetY, rootNode, }: {
        offsetX: number;
        offsetY: number;
        rootNode: HTMLElement;
    }) => string | undefined | void);
}

Type declaration

OptionalapplyUserSelectHack?: 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
```
Optionalaxis?: 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'
```
Optionalbounds?: 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.
Optionalcancel?: 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
```
OptionaldefaultClass?: 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
OptionaldefaultClassDragged?: string
Class to apply on the element if it has been dragged at least once.
Default
```
'neodrag-dragged'
```
OptionaldefaultClassDragging?: string
Class to apply on the element when it is dragging
Default
```
'neodrag-dragging'
```
OptionaldefaultPosition?: {
x: number;
y: number;
}
Offsets your element to the position you specify in the very beginning. x and y should be in pixels
- x: number
- y: number
Optionaldisabled?: boolean
Disables dragging altogether.
Default
```
false
```
OptionalgpuAcceleration?: 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
```
Optionalgrid?: [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
```
Optionalhandle?: 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
```
OptionalignoreMultitouch?: 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
```
OptionallegacyTranslate?: 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
```
OptionalonDrag?: ((data: DragEventData) => void)
Fires when dragging is going on
- - (data): void
  - Parameters
    - data: DragEventData
    Returns void
OptionalonDragEnd?: ((data: DragEventData) => void)
Fires when dragging ends
- - (data): void
  - Parameters
    - data: DragEventData
    Returns void
OptionalonDragStart?: ((data: DragEventData) => void)
Fires when dragging start
- - (data): void
  - Parameters
    - data: DragEventData
    Returns void
Optionalposition?: {
x: number;
y: number;
}
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
- x: number
- y: number
OptionalrecomputeBounds?: {
    drag?: boolean;
    dragEnd?: boolean;
    dragStart?: boolean;
}
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 }'
```
- Optionaldrag?: boolean
- OptionaldragEnd?: boolean
- OptionaldragStart?: boolean
Optionaltransform?: (({ offsetX, offsetY, rootNode, }: {
    offsetX: number;
    offsetY: number;
    rootNode: HTMLElement;
}) => 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
Default
```
undefined
```
- - ({ offsetX, offsetY, rootNode, }): string | undefined | void
  - Parameters
    - { offsetX, offsetY, rootNode, }: {
          offsetX: number;
          offsetY: number;
          rootNode: HTMLElement;
      }
      offsetX: number
      offsetY: number
      rootNode: HTMLElement
    Returns string | undefined | void

Type Alias DragOptions

Type declaration

OptionalapplyUserSelectHack?: boolean

Default

Optionalaxis?: DragAxis

Default

Optionalbounds?: DragBounds

Optionalcancel?: string | HTMLElement | HTMLElement[]

Default

OptionaldefaultClass?: string

OptionaldefaultClassDragged?: string

Default

OptionaldefaultClassDragging?: string

Default

OptionaldefaultPosition?: { x: number; y: number; }

x: number

y: number

Optionaldisabled?: boolean

Default

OptionalgpuAcceleration?: boolean

Default

Optionalgrid?: [number, number]

Default

Optionalhandle?: string | HTMLElement | HTMLElement[]

Default

OptionalignoreMultitouch?: boolean

Default

OptionallegacyTranslate?: boolean

Default

OptionalonDrag?: ((data: DragEventData) => void)

Parameters

Returns void

OptionalonDragEnd?: ((data: DragEventData) => void)

Parameters

Returns void

OptionalonDragStart?: ((data: DragEventData) => void)

Parameters

Returns void

Optionalposition?: { x: number; y: number; }

x: number

y: number

OptionalrecomputeBounds?: { drag?: boolean; dragEnd?: boolean; dragStart?: boolean; }

Default

Optionaldrag?: boolean

OptionaldragEnd?: boolean

OptionaldragStart?: boolean

Optionaltransform?: (({ offsetX, offsetY, rootNode, }: { offsetX: number; offsetY: number; rootNode: HTMLElement; }) => string | undefined | void)

Default

Parameters

offsetX: number

offsetY: number

rootNode: HTMLElement

Returns string | undefined | void

Settings

`Optional`applyUserSelectHack?: boolean

`Optional`axis?: DragAxis

`Optional`bounds?: DragBounds

`Optional`cancel?: string | HTMLElement | HTMLElement[]

`Optional`defaultClass?: string

`Optional`defaultClassDragged?: string

`Optional`defaultClassDragging?: string

`Optional`defaultPosition?: {
x: number;
y: number;
}

`Optional`disabled?: boolean

`Optional`gpuAcceleration?: boolean

`Optional`grid?: [number, number]

`Optional`handle?: string | HTMLElement | HTMLElement[]

`Optional`ignoreMultitouch?: boolean

`Optional`legacyTranslate?: boolean

`Optional`onDrag?: ((data: DragEventData) => void)

`Optional`onDragEnd?: ((data: DragEventData) => void)

`Optional`onDragStart?: ((data: DragEventData) => void)

`Optional`position?: {
x: number;
y: number;
}

`Optional`recomputeBounds?: {
drag?: boolean;
dragEnd?: boolean;
dragStart?: boolean;
}

`Optional`drag?: boolean

`Optional`dragEnd?: boolean

`Optional`dragStart?: boolean

`Optional`transform?: (({ offsetX, offsetY, rootNode, }: {
offsetX: number;
offsetY: number;
rootNode: HTMLElement;
}) => string | undefined | void)