- Example 1 -- Drag animals into the zoo box
- Example 2 -- Drag between two boxes
- Example 3 -- Drag list items and change their order between two lists
(https://react-project-03-dnd-playground.vercel.app/)
-
'react-dnd' a.
import { DndProvider } from 'react-dnd'; import { HTML5Backend } from 'react-dnd-html5-backend'; <DndProvider backend={HTML5Backend}> <App /> </DndProvider> ```
b.
import { useDrop } from 'react-dnd'; const [{ isOver }, drop] = useDrop(() => ({ accept: 'card', collect: (monitor) => ({ isOver: monitor.isOver() // Detect if the droppable component enter the draggable area }), drop: (item) => { handleDrop(item) // Receive droppable item id } }), [handleDrop]); ```
<div ref={drop}> ... </div> ```
c.
import { useDrag } from 'react-dnd' const [{ isDragging }, drag] = useDrag(() => ({ type: 'card', item: { id }, collect: (monitor) => ({ isDragging: monitor.isDragging(), }) })); ```
<div ref={drag}> ... </div> ```
isOver isDragging
-
'react-beautiful-dnd' a.
<DragDropContext onDragEnd={handleOnDragEnd}> ... </DragDropContext>
b.
<Droppable droppableId="type"> {(provided) => ( <div className='listContainer' {...provided.droppableProps} ref={provided.innerRef} > ... </div> )} {provided.placeholder} </Droppable>
c.
<Draggable key={id} draggableId={id} index={index}> {(provided) => ( <div className='Card' {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef} > ... </div> )} </Draggable>
For onDragStart = () => { /.../ }; onDragUpdate = () => { /.../ } onDragEnd = () => { // the only one that is required // usually include reorder logic and something else };
For Required: DroppableId
For Required: key(if map something), draggableId, index