🏄 drag

A lightweight JavaScript "hold and drag" utility. Vanilla JS - No dependencies.
Its size is ~867 Bytes (minified and compressed).

➝ See the online demo (Advanced example) | Demo Source Code🔥🔥

Usage

npm install @mystroken/drag and start using the hold and drag system.

import Drag from '@mystroken/drag';

// Elements to listen/move.
const slidable = document.querySelector('#slidable');
const container = document.querySelector('#container');

// Where to store the drag position.
let currentX = 0;
let currentY = 0;

// Initialize the library.
const options = {
  listener: container,
  multiplier: 2
};
const drag = new Drag(options);

// Store the cursor position on move.
drag.on(event => {
  currentX = event.X;
  currentY = event.Y;
});

// Use the cursor position to slide the slidable element.
requestAnimationFrame(move);
function move() {
  slidable.style.transform = `translate3d(${currentX}px, ${currentY}px, 0px)`;
  requestAnimationFrame(move);
}

Options

listener

Determines the DOM element on which to apply the hold and drag feature.

Default	Type
window	DOM Element

multiplier

Set a speed multiplier for the movement (the normal speed is 1).

Default	Type
1	int

Methods

on(callback)

Subscribes a callback function to listen any "hold and drag" operation.

drag.on(function(event) {
  // Start consuming the event data.
  currentX = event.X;
  currentY = event.Y;
});

Argument	Type	Params	Required
callback	Function	An event object giving the current X & Y positions of the mouse on the container	Yes

off(callback)

Unsubscribes the callback function from listening operations.

Argument	Type	Params	Required
callback	Function	An event object giving the current X & Y positions of the mouse on the container	Yes