✳flâneur — a map of the web's best reading

Draggable - @dnd-kit – Documentation

docs.dndkit.com · 1,370 words · saved by 1 readers

Home Examples Github Search ⌘ K Overview INTRODUCTION Installation Quick start API DOCUMENTATION DndContext Droppable Draggable useDraggable Drag Overlay Sensors Modifiers PRESETS Sortable GUIDES Accessibility Powered By GitBook Draggable Use the useDraggable hook turn DOM nodes into draggable sources that can be picked up, moved and dropped over droppable containers. Usage The useDraggable hook isn't particularly opinionated about how your app should be structured. Node ref At minimum though, you need to pass the setNodeRef function that is returned by the useDraggable hook to a DOM element so that it can access the underlying DOM node and keep track of it to detect collisions and intersections with other droppable elements. import {useDraggable} from '@dnd-kit/core'; import {CSS} from '@dnd-kit/utilities'; ​ ​ function Draggable() { const {attributes, listeners, setNodeRef, transform} = useDraggable({ id: 'unique-id', }); const style = { transform: CSS.Translate.toStr

Usage The useDraggable hook isn’t particularly opinionated about how your app should be structured. Node ref At minimum though, you need to pass the setNodeRef function that is returned by the useDraggable hook to a DOM element so that it can access the underlying DOM node and keep track of it to detect collisions and intersections with other droppable elements. import {useDraggable} from '@dnd-kit/core' ; import {CSS} from '@dnd-kit/utilities' ; function Draggable () { const {attributes, listeners, setNodeRef, transform} = useDraggable ({ id: 'unique-id' , }); const style = { transform: CSS.T

Explore this link on the map →

related reading