DFlex
A Drag-and-Drop library for all JavaScript frameworks
DFlex is a JavaScript library for modern drag and drop applications. It is built with vanilla JavaScript and implements an enhanced transformation mechanism to manipulate DOM elements. DFlex is the only drag and drop library on the internet that manipulates the DOM instead of reconstructing it. It also has its own scheduler and reconciler.
Combined With Your Solution
Every node manipulation is calculated and exposed. So you can add your own functionality without the need to start from scratch.
Vanilla JavaScript
It is a JavaScript solution. It is not a solution for a specific framework. A pure JavaScript library. Every fix, feature, or enhancement will affect all framework implementations.
Native API
A movement mechanism understands the browser and your DOM tree. Focused on high performance and easy implementation without re-inventing the wheel.
Minimum Layout Shift
In most existing solutions the more elements you are trying to manipulate the more layout shifts you get. In real-world apps, you need to prevent cumulative layout shifts. This is one of the fundamentals that DFlex deals with. No matter how many elements you are dealing with it’s always going to be smooth manipulation.
DOM Utility Packages
DFlex is a collection of DOM utility packages. The API design allows dealing with extendable node elements without throttling. The other benefit is the ability to decouple the functionality to prevent a bloated bundle in the production and to make it easier to maintain.
Neat Architecture
DFlex has parent/children architecture. So you can manipulate a child or parent.
Dynamic architecture
Traverse DOM without calling browser API
Infinite DOM transformation instead of reconstructing the DOM tree with every interaction
Customized and enhanced reconciler targets only elements transformed from origin
Isolated from data flow with a scheduler prevents any blocking event
Prevent layout shift that happens with any Drag and Drop mechanism
Animated transformation with each interaction
Headless and compatible with any modern JS framework
Targeting each DOM element individually based on registration
Event driven and fully customized API
Extensible using its own matching algorithm instead of flat recursion algorithm(s)
Support three different types of restrictions
Support four types of custom events and custom layout state emitter