Draggable properties
Properties available on the Draggable instance returned by a createDraggable() function.
const draggable = createDraggable(target, parameters);
┌──────────┐
draggable.│progressX │
draggable.│progressY ├─ Properties
draggable.│velocity │
└──────────┘| Name | Description |
|---|---|
| snapX | Gets and sets the snap value of the x axis (Number|Array<Number>) |
| snapY | Gets and sets the snap value of the y axis (Number|Array<Number>) |
| scrollSpeed | Gets and sets the speed value at which the draggable container auto scrolls (Number) |
| scrollThreshold | Gets and sets the threshold distance from container edges before auto-scrolling begins (Number) |
| dragSpeed | Gets and sets the speed value at which the draggable element gets dragged (Number) |
| maxVelocity | Gets and sets the maximum velocity limit for the draggable element (Number) |
| minVelocity | Gets and sets the minimum velocity limit for the draggable element (Number) |
| velocityMultiplier | Gets and sets the multiplier applied to velocity calculations (Number) |
| releaseEase | Gets and sets the easing function applied to the draggable element animations (Function) |
| releaseSpring | Gets the internal spring used to move the draggable element after release (Spring) |
| containerPadding | Gets and sets padding values for the container [top, right, bottom, left] (Array<Number>) |
| containerFriction | Gets and sets the friction value applied within the container (Number) |
| containerBounds | Gets the bounds of the container [top, right, bottom, left] (Array<Number>) |
| containerArray | Gets array of container elements if multiple containers were provided (Array<HTMLElement>|null) |
| $container | Gets and sets the container element (HTMLElement) |
| $target | Gets and sets the target element (HTMLElement) |
| $trigger | Gets the trigger element (HTMLElement) |
| $scrollContainer | Gets the scroll container (window or container element) (Window|HTMLElement) |
| x | Gets and sets the x position (Number) |
| y | Gets and sets the y position of the dragged element (Number) |
| progressX | Gets and sets the progress (0-1) of the x position relative to the container (Number) |
| progressY | Gets and sets the progress (0-1) of the y position relative to the container (Number) |
| velocity | Gets the current velocity of the draggable element (Number) |
| angle | Gets the current angle in radians of the draggable element (Number) |
| xProp | Gets the mapped x property name (String) |
| yProp | Gets the mapped y property name (String) |
| destX | Gets the currently defined destination of the x axis (Number) |
| destY | Gets the currently defined destination of the y axis (Number) |
| deltaX | Gets the current delta of the x axis (Number) |
| deltaY | Gets the current delta of the y axis (Number) |
| enabled | Returns true if the draggable is enabled (Boolean) |
| grabbed | Returns true if the element is currently being grabbed (Boolean) |
| dragged | Returns true if the element is currently being dragged (Boolean) |
| cursor | Gets and sets cursor behavior (Boolean|DraggableCursorParams) |
| disabled | Gets the disabled state for [x, y] axes (Array<Number>) |
| fixed | Returns true if the target element has position:fixed (Boolean) |
| useWin | Returns true if using window as container (Boolean) |
| isFinePointer | Gets and sets whether fine pointer (e.g. mouse) is being used (Boolean) |
| initialized | Returns true if the draggable has been initialized (Boolean) |
| canScroll | Returns true if auto-scrolling is possible (Boolean) |
| contained | Returns true if draggable is contained within bounds (Boolean) |
| manual | Returns true if in manual control mode (Boolean) |
| released | Returns true if element was just released (Boolean) |
| updated | Returns true if position was just updated (Boolean) |
| scroll | Gets the current scroll position {x, y} (Object) |
| coords | Gets the current and previous coordinates [x, y, prevX, prevY] (Array<Number>) |
| snapped | Gets the snap state for [x, y] axes (Array<Number>) |
| pointer | Gets current and previous pointer positions [x, y, prevX, prevY] (Array<Number>) |
| scrollView | Gets the scroll view dimensions [width, height] (Array<Number>) |
| dragArea | Gets the drag area bounds [x, y, width, height] (Array<Number>) |
| scrollBounds | Gets the scroll container bounds [top, right, bottom, left] (Array<Number>) |
| targetBounds | Gets the target element bounds [top, right, bottom, left] (Array<Number>) |
| window | Gets the window dimensions [width, height] (Array<Number>) |
| pointerVelocity | Gets the current pointer velocity (Number) |
| pointerAngle | Gets the current pointer angle in radians (Number) |
| activeProp | Gets the active property being animated (String) |
| onGrab | Gets and sets the callback fired when element is grabbed (Function) |
| onDrag | Gets and sets the callback fired while dragging (Function) |
| onRelease | Gets and sets the callback fired on release (Function) |
| onUpdate | Gets and sets the callback fired on any position update (Function) |
| onSettle | Gets and sets the callback fired when movement settles (Function) |
| onSnap | Gets and sets the callback fired when element snaps (Function) |
| onResize | Gets and sets the callback fired when container/element resizes (Function) |
| onAfterResize | Gets and sets the callback fired after resize handling completes (Function) |