Release DFlex Drag & Drop Support Vertical and Horizontal Movement

A Simple, lightweight Solution for a Drag & Drop App

npm install @dflex/dnd

show how drag and drop works

DFlex DnD is written in pure JavaScript and can be used with different frameworks
whether it is React, Vue, Angular, etc.

It depends on animation, tracks each droppable area which makes the whole
process runs smoothly as much as possible.

show drag and drop performance

Three Steps

You can achieve a drag and drop with three steps only (register, start, end)

import { store, DnD } from "@dflex/dnd";

Register element

Each element should be registered in DnD store in order to be active later

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

Trigger dragging

Use onmousedown to trigger responsive dragging

const { target, clientX, clientY } = event;

dnd = new DnD(id: target.id, { x: clientX, y: clientY });

End dragging

Use onmouseup to end dragging

const { clientX, clientY } = event;

dnd.dragAt(clientX, clientY);

You can see full React example in
playgrounds.
Contributors feel free to apply PR for another frameworks and more examples. For
Draggable only you can use DFlex Draggable.

Test

yarn test dnd

License

This package is licensed under the GPL-3.0 License

Author: admin

Leave a Reply

Your email address will not be published.