Draggable
On this page
Allows you to drag around elements on the screen.
Usage
new draggable(draggableOptions);
Basic implementation
const square = new draggable({ element: '.square' });
dragableOptions
element
Type:
type element = string
The element selector.
restrictTo
Type:
type restrictTo = string;
Restricts the dragged element to another element. That way the dragged element won’t go out of the other element bounds.
Example
const square = new draggable({ element: '.square', restrictTo: '.container' });
dragClass
Type:
type dragClass = string
Class to be added to the dragged element.
lockAxis
Type:
type lockAxis = 'x' | 'y'
Locks the dragged element to either the x or y axis.
Example
const square1 = new draggable({ element: '.square1', lockAxis: 'x' });
const square2 = new draggable({ element: '.square2', lockAxis: 'y' });
onDragStart
Type:
type onDragStart = () => {}
Executes when you start dragging the element.
onDragMove
Type:
type onDragMove = () => {}
Executes when you move the dragged element.
onDragEnd
Type:
type onDragEnd = () => {}
Executes when you stop dragging the element.
Actions
You are able to drag elements using actions. Since every draggable action is unique you can do the following:
const element = new draggable({ element: '.square'});
actions.execute(element.actionName, {x: 100, y: 100, index: 0});
You will need to pass the x and y coordinates where you want the element to go and the index of the element.