# 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.