@dflex/draggable

@dflex/draggable

Draggable is a native component written in pure JS works for Web and Mobile

npm install @dflex/draggable

DFlex draggable is the simplest solution to create JavaScript draggable elements. No need for special tutorial and thinking about implementation complexity or even migration to different technologies for different frameworks. It can be used with any JavaScript frameworks React, Vue, Angular.

API

import { store, Draggable } from "@dflex/draggable";

Registry

Register draggable element in draggable store:

store.register({ id: string, element: Node });

Draggable instance

Create draggable instance onmousedown:

const draggable = new Draggable(id: string, {x: event.clientX, y: event.clientY});

Move element onmousemove

draggable.dragAt(event.clientX, event.clientY);

End Dragging onmouseup

draggable.endDragging();

Examples

• Full React example

• Full Vue example

Contributes feel free to apply PR for another frameworks.

Test

yarn test draggable

License

This package is licensed under the GPL-3.0 License