Introducing DFlex - A Modern Javascript Drag and Drop Library

I'm excited to announce the release of DFlex, a new Javascript library for building modern drag and drop interfaces.

DFlex aims to make it easy to add natural dragging, dropping, and sorting interactions to your web apps. It is lightweight, dependency-free, and works across all modern browsers.

Some key features of DFlex include:

• DOM Manipulation - DFlex directly manipulates the DOM instead of reconstructing it like other libraries. This results in better performance and avoids layout shifts.

• Transformation Scheduler - DFlex has its own scheduler and reconciler to transform elements. This prevents blocking and allows smooth, concurrent animations.

• Custom Events & Listeners - DFlex provides custom events for dragging, interactivity, siblings, and more. It also has layout listeners to monitor state changes.

• Modular Architecture - DFlex is built with a modular architecture, including separate packages for the DOM generator, utilities, store, draggable, and more.

• Framework Agnostic - DFlex is framework agnostic and works with React, Vue, Angular, and vanilla JS.

• Configurable - Options like dragging threshold, restrictions, auto-scroll, and more can be configured per element.

I built DFlex to push drag and drop capabilities further and handle complex interfaces at scale without compromises. The project is MIT licensed and open source on GitHub.

Here is a simple DnD component using React and DFlex:

// Simple DFlex DnD Component 

import React from 'react';
import { store, DnD } from '@dflex/dnd';

let draggableInstance; 

const DFlexDnD = ({ id, children }) => {

  const ref = React.useRef();

  React.useEffect(() => {
    if (ref.current) {
      store.register({ id });
    }

    return () => store.unregister(id);
  }, [id]);

  const onMouseDown = e => {
    if (e.button === 0) {
      draggableInstance = new DnD(id, {x: e.clientX, y: e.clientY});
    }
  };

  const onMouseMove = e => {
    if (draggableInstance) {
      draggableInstance.dragAt(e.clientX, e.clientY); 
    }
  };

  const onMouseUp = () => {
    if (draggableInstance) {
      draggableInstance.endDragging();
      draggableInstance = null;
    }
  };

  return (
    <div
      ref={ref}
      onMouseDown={onMouseDown}
      onMouseMove={onMouseMove}
      onMouseUp={onMouseUp}  
    >
      {children}
    </div>
  );

};

export default DFlexDnD;

With just a few lines of code, we can add drag and drop capabilities to a component. The DFlex store manages registration, while the DnD instance handles the dragging logic.

I'd love for you to check out the DFlex website to see examples and live demos. Let me know if you end up building something cool with DFlex! I'm always looking for feedback to help improve the library.

dflex-js / dflex

The sophisticated Drag and Drop library you've been waiting for 🥳

DFlex

DFlex is a Javascript library for modern Drag and Drop apps. It's built with vanilla Javascript and implemented an enhanced transformation mechanism to manipulate DOM elements. It is by far the only Drag and Drop library on the internet that manipulates the DOM instead of reconstructing it and has its own scheduler and reconciler.

Features

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

View on GitHub