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.