@dflex/draggable

Modern Draggable package for all JavaScript frameworks

@dflex/draggable

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

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 🏋️‍

Drag & Drop

A Drag-and-Drop package for all JavaScript frameworks implementing an enhanced transformation mechanism to manipulate DOM elements. You can achieve a drag and drop with three steps only with mouse/touch event.

Utils/DOM Generator

DOM relations generator algorithm. Generate relations between DOM elements based on element depth without a browser.

Utils/DOM Store

The only Store that allows you to traverse through the DOM tree using element id without reading from the browser.