EffDnD is a self-confident Drag and Drop library based only on the browser APIs.

Some features

• lightweight
• zero-dependency
• framework agnostic
• touch events support
• customizable styles

Links

• Docs
• Repository
• Github mirror

Examples

• React
• Svelte

Installation

Type in your terminal:

# npm
npm i effdnd

# pnpm
pnpm add effdnd

# yarn
yarn add effdnd

Quick start

In short, effdnd uses two custom web component:

• effdnd trigger is triggerring drag-and-drop,
• effdnd-actor indicates the areas of the layout that will participate in the drag-and-drop process (play their roles).

The web component effdnd-actor can "play" several roles:

• item - the item being moved.,
• target - the target of the move,
• scope - movement boundaries.

To define both web components, simply call the useDnD function, and use the results of the call to create an event listeners

import { useDnD } from 'effdnd';

// you can pass style parameters to useDnD,
// to override the movement parameters
// (for more information, see the type `TUseDnD`)
const { observe } = useDnD();

export const Component = () => {
    const ref = useRef();
    useEffect(() => {
      // you can subscribe to Drag-and-Drop events
      const unobserve = observe((e) => {
        // the event is being processed here
      }, ref.current);
      // and you can unsubscribe
      return () => unobserve();
    });
    return <effdnd-actor scope='top' ref={ref} >
        <div className="targets-wrapper">
            <effdnd-actor target='target-1'>...</effdnd-actor>
            <effdnd-actor target='target-2'>...</effdnd-actor>
        </div>
        <div id="items-wrapper">
            <effdnd-actor item='item-1'>
                <effdnd-trigger>Trigger #1</effdnd-trigger>
            </effdnd-actor>
            <effdnd-actor item='item-2'>
                <effdnd-trigger>Trigger #2</effdnd-trigger>
            </effdnd-actor>
        </div>
    </effdnd-actor>;
}

That's all. Enjoy simplicity.