Self-confident Drag and Drop
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
;
}
``