Table of Contents
Description
The Drag utility provides a function to handle drag events and execute callbacks during the drag lifecycle.
Basic Usage
import drag from '../src/utils/drag.js';
const element = document.getElementById('draggable');
const removeListeners = drag({
element,
callback: (diff) => console.log(diff),
startCallback: () => console.log('Drag started'),
moveCallback: (diff) => console.log('Dragging', diff),
endCallback: (diff) => console.log('Drag ended', diff),
preventScroll: true
});
// To remove event listeners
removeListeners();
JavaScript Reference
drag
drag(options object)
Parameters
options: object
An object containing the following properties:
element: HTMLElement
The element to attach drag events to.
callback: function
A function to call on drag move. The object passed into the callback contains an x
and a y
that represents the distance the mouse has traveled in x and y since the drag started, with positive x being to the right, negative x to the left, positive y towards the bottom, and negative y towards the top.
startCallback: function
A function to call on drag start. The object passed into the callback contains an x
and a y
that represents the initial position of the mouse.
moveCallback: function
A function to call on drag move. The object passed into the callback contains an x
and a y
that represents the distance the mouse has traveled in x and y since the drag started, with positive x being to the right, negative x to the left, positive y towards the bottom, and negative y towards the top.
endCallback: function
A function to call on drag end. The object passed into the callback contains an x
and a y
that represents the distance the mouse has traveled in x and y since the drag started, with positive x being to the right, negative x to the left, positive y towards the bottom, and negative y towards the top.
preventScroll: boolean
Whether to prevent scrolling during drag. Default is false.
Returns
A function to remove the event listeners.