@dflex/draggable

DFlex Draggable

@dflex/draggable

Light weight draggable element without extra functionalities that is responsible for interacting with the DOM and moving the affected element(s).

DFlex Features ✅

• Dynamic architecture.
• Traverse DOM without calling browser API.
• Transform elements instead of reordering the DOM tree.
• Animated movement from point-x to point-y.
• Prevent drag and drop layout shift.
• Isolated from data flow.
• Headless as it is just functions that do manipulation.
• Event driven API.
• Targeting each DOM node individually.
• Extensible using JSON tree instead of flat recursion.

Installation 📦

npm install @dflex/draggable

Documentation 📖

Visit DFlex site for docs https://www.dflex.dev/ and live demo.

Related Content 🏋️‍

@dflex/dom-gen

DFlex DOM relations generator algorithm. It Generates relations between DOM elements based on element depth so all the registered DOM can be called inside registry without the need to call browser API. Read once, implement everywhere.

@dflex/core-instance

Core instance is the mirror of interactive element that includes all the properties and methods to manipulate the node.

@dflex/utils

A collection of shared functions. Mostly classes, and types that are used across the project.

@dflex/store

DFex Store has main registry for all DOM elements that will be manipulated. It is a singleton object that is accessible from anywhere in the application. The initial release was generic but it only has the Core of the library since ^V3.

@dflex/dnd

The main package that depends on the other packages. It is responsible for the magical logic of the library to introduce the drag and drop interactive functionality.

License 🤝

DFlex is MIT License since version 3.0.0 and above.