Very simple boilerplate code to show how to create a drag and drop with a exposing hook.
Features:
- Touch support;
- Mouse support;
- Droppable zone;
- No Packages external packages;
- Calculates overlap between draggable and droppable
Example code under App.tsx
Consuming example:
const { translate, isDragging, isDraggableOverllapping, setTranslate } = useDragDrop(draggableRef, droppableRef, {
onDrop: () => {
resetToInitalPosition()
},
})