Draggable

Allows you to drag around elements on the screen.

Usage

new draggable(draggableOptions);

Basic implementation

const square = new draggable({ element: '.square' });

draggableOptions

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 = (element: HTMLElement) => void;

Executes when you start dragging the element.

onDragMove

Type:

type onDragMove = (position: { x: number; y: number }) => void;

Executes when you move the dragged element.

onDragEnd

Type:

type onDragEnd = (element: HTMLElement) => void;

Executes when you stop dragging the element.

Properties

actionName readonly

Type:

type actionName = string

The name of the action that can be used to programmatically drag the element.

touchEnabled

Type:

type touchEnabled = boolean

Enables or disables touch events. Default is false.

Methods

deinit()

Removes the event listeners and disables the draggable functionality.

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.