DFlex site logo

DFlex

A Drag-and-Drop library for all JavaScript frameworks

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.

DFlex hero

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.

No Lagging

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.

No Lagging

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
  • 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

Sign in