@dflex/dnd

Modern drag and drop package for all JavaScript frameworks

Usage no npm install needed!

<script type="module">
  import dflexDnd from 'https://cdn.skypack.dev/@dflex/dnd';
</script>

README

Dflex logo

Modern drag and drop package for all JavaScript frameworks

Dflex build status number of opened pull requests number of opened issues Dflex welcomes pull request

@dflex/dnd

DFlex Drag and Drop is a modern drag and drop package for all JavaScript frameworks 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.

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/dnd

Documentation 📖

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

Related Content 🏋️‍

Draggable

DFlex Draggable is the simplest solution to create JavaScript draggable only elements.

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.