Here are few things as facts -You don’t need to get into a learning loophole to let your DOM elements interact with each other -Any Drag and Drop implementation should take into considerations layout shifts, lagging and the cost of browser painting –The movement mechanism should only affect the layout and be decoupled from your app data flow. If you agree, then you are in the right place.
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.
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.
DFlex has parent/children architecture. So you can manipulate a child or parent.
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