Introducing DFlex – A Modern Javascript Drag and Drop Library

I am excited to announce the discharge of DFlex, a brand new Javascript library for constructing fashionable drag and drop interfaces.

DFlex goals to make it simple so as to add pure dragging, dropping, and sorting interactions to your internet apps. It’s light-weight, dependency-free, and works throughout all fashionable browsers.

Some key options of DFlex embody:

• DOM Manipulation – DFlex immediately manipulates the DOM as a substitute of reconstructing it like different libraries. This leads to higher efficiency and avoids format shifts.

• Transformation Scheduler – DFlex has its personal scheduler and reconciler to rework parts. This prevents blocking and permits easy, concurrent animations.

• Customized Occasions & Listeners – DFlex supplies customized occasions for dragging, interactivity, siblings, and extra. It additionally has format listeners to observe state modifications.

• Modular Structure – DFlex is constructed with a modular structure, together with separate packages for the DOM generator, utilities, retailer, draggable, and extra.

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

• Configurable – Choices like dragging threshold, restrictions, auto-scroll, and extra might be configured per ingredient.

I constructed DFlex to push drag and drop capabilities additional and deal with advanced interfaces at scale with out compromises. The venture is MIT licensed and open supply on GitHub.

Right here is a straightforward DnD part utilizing React and DFlex:

// Easy DFlex DnD Element 

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

let draggableInstance; 

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

  const ref = React.useRef();

  React.useEffect(() => {
    if (ref.present) {
      retailer.register({ id });
    }

    return () => retailer.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}  
    >
      {youngsters}
    </div>
  );

};

export default DFlexDnD;

With just some traces of code, we are able to add drag and drop capabilities to a part. The DFlex retailer manages registration, whereas the DnD occasion handles the dragging logic.

I might love so that you can take a look at the DFlex website to see examples and dwell demos. Let me know if you find yourself constructing one thing cool with DFlex! I am at all times on the lookout for suggestions to assist enhance the library.