Installation

npm install @dflex/draggable

API

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";

Register element

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

store.register(id: string);

Create dragging instance

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

Start dragging

dflexDraggable.dragAt(x, y);

• x: number is event.clientX, the horizontal click coordinate.
• y: number is event.clientY, the vertical click coordinate.

End dragging

dflexDraggable.endDragging();

Cleanup element

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.

store.unregister(id);

• id: string registered element-id.

Documentation 📖

For documentation, more information about DFlex and a live demo, be sure to visit the DFlex website https://www.dflex.dev/

License 🤝

DFlex is MIT License.