Drag

Table of Contents
Examples
Basic Usage
JavaScript Reference
drag

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.