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.

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