EffDND

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
- SourceCraft
- GitVerse
- GitHub

Examples

- React
- Svelte

Installation

Type in your terminal:

``sh

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

`jsx
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

...
...

Trigger #1


Trigger #2

;
}
``

That's all. Enjoy simplicity.