effdnd
v3.1.0
Published
Self-confident Drag and Drop
Maintainers
effndReadme
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
Examples
Installation
Type in your terminal:
# npm
npm i effdnd
# pnpm
pnpm add effdnd
# yarn
yarn add effdndQuick start
In short, effdnd uses two custom web component:
effdnd triggeris triggerring drag-and-drop,effdnd-actorindicates 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 event listeners
import { useDnD } from 'effdnd';
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>;
}If you are using server-side rendering just add script with effdnd declaration to your HTML head to keep your layout:
<head>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/use.js"></script>
</head>This script will also allow you to use effdnd as a global variable:
import { TUseDnD } from 'effdnd';
declare global {
interface Window {
effdnd: ReturnType<TUseDnD>;
}
};
const unobserve = window.effdnd.observe(() => console.log('effdnd'));That's all. Enjoy simplicity.