Draggable only package for all JavaScript frameworks
npm install @dflex/draggable
alt="Dflex build status" />
alt="number of opened pull requests"/>
alt="DFlex last released version" />
alt="number of opened issues"/>
alt="Dflex welcomes pull request" />
alt="Follow DFlex on twitter" />
``bash`
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.
`js`
import { store, Draggable } from "@dflex/draggable";
Each element should be registered in draggable store in order to be dragged later.
`ts`
store.register(id: string);
The dragging instance should be created when onmousedown is fired. So you
initialized the element before start dragging.
`ts`
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
`ts`
dflexDraggable.dragAt(x, y);
- x: number is event.clientX, the horizontal click coordinate.y: number
- is event.clientY, the vertical click coordinate.
`ts`
dflexDraggable.endDragging();
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.
`ts`
store.unregister(id);
- id: string` registered element-id.
For documentation, more information about DFlex and a live demo, be sure to visit the DFlex website
DFlex is MIT License.