drag-by-handle

Tiny browser utility that makes any HTML element draggable, optionally through a dedicated handle.

Install

npm install drag-by-handle

Usage

import draggable from 'drag-by-handle';

const panel = document.querySelector('.panel');
const handle = panel.querySelector('.panel__handle');

draggable(panel, handle);

panel.whenDragStarts(({ x, y }) => {
  console.log('drag starts at', x, y);
});

panel.whenDragging(({ x, y, offsetX, offsetY }) => {
  console.log('dragging', { x, y, offsetX, offsetY });
});

panel.whenDragStops(({ x, y }) => {
  console.log('drag stopped at', x, y);
});

If you omit the second argument, the element itself becomes the drag handle.

Notes for 4.0.0

Version 4.0.0 removes unrelated package dependencies and ships a modern dual-entry package:

• require('drag-by-handle')
• import draggable from 'drag-by-handle'