Draggable API

npm install @dflex/draggable

DFlex Draggable depends on three principles to achieve DOM interactivity:

  • Register element in the store.
  • Start dragging when mouse is down.
  • End dragging to release element when mouse is up.
import { store, Draggable } from "@dflex/draggable";

Each element should be registered in draggable store in order to be dragged later.

store.register(id: string);

The dragging instance should be created when onmousedown is fired. So you initialized the element before start dragging.

const dflexDraggable = new Draggable(id, clickCoordinates);
  • id: string registered element-id in the store.
  • coordinate: AxesPoint is an object with {x: number, y: number} contains the coordinates of the

dflexDraggable.dragAt(x, y);
  • x: number is event.clientX, the horizontal click coordinate.
  • y: number is event.clientY, the vertical click coordinate.


It's necessary to cleanup the element from store when the element won't be used or will be removed/unmounted from the DOM to prevent memory leaks.

  • id: string registered element-id.