Optional
applyOptional
axis?: DragAxisAxis on which the element can be dragged on. Valid values: both
, x
, y
, none
.
both
- Element can move in any directionx
- Only horizontal movement possibley
- Only vertical movement possiblenone
- No movement at allOptional
bounds?: DragBoundsOptionally 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
.
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.
Optional
defaultClass 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
Optional
defaultClass to apply on the element if it has been dragged at least once.
Optional
defaultClass to apply on the element when it is dragging
Optional
defaultOffsets your element to the position you specify in the very beginning.
x
and y
should be in pixels
Optional
disabled?: booleanDisables dragging altogether.
Optional
gpuIf 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
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
.
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.
Optional
ignoreIgnores 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.
Optional
legacyIf 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.
Optional
onFires when dragging is going on
Optional
onFires when dragging ends
Optional
onFires when dragging start
Optional
position?: { 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
Optional
recomputeWhen to recalculate the dimensions of the bounds
element.
By default, bounds are recomputed only on dragStart. Use this options to change that behavior.
Optional
drag?: booleanOptional
dragOptional
dragOptional
transform?: (({ offsetX, offsetY, rootNode, }: { 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
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