I'm doing "To do List", and I want to move the columns as well as the cards, and I want to do drag and drop.
My problem is that I can't understand these terms:
"provided".
"provided.draggableProps"
3."provided.dragHandleProps"
4."provided.innerRef".
<Draggable draggableId={props.task.id} index={props.index}> {(provided) => ( <Box sx={{ display: "flex", flexWrap: "wrap", "& > :not(style)": { m: 1, width: 128, height: 128, }, }} // i put it in the component that i want to move it {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef} > <Paper elevation={3}>{props.task.content}</Paper> </Box> )} </Draggable> 1 Answer
You are creating a function immediately inside of that Draggable component that passes in the provided argument.
Note: This function can pass in two arguments including a snapshot argument, but I guess you are not using it.
The provided argument include information and references to code that the library needs to work properly.
You added provided.innerRef which is going to create a reference for the library to access the list element’s HTML element. It also applies props to the element (provided.draggableProps) that allows the library to keep track of movements and positioning.
provided.draggableProps - This is an Object that contains a data attribute and an inline style. This Object needs to be applied to the same node that you apply provided.innerRef to. This controls the movement of the draggable when it is dragging and not dragging
provided.dragHandleProps - (?DragHandleProps) every Draggable has a drag handle. This is what is used to drag the whole Draggable. Often this will be the same node as the , but sometimes it can be a child of the Draggable. DragHandleProps need to be applied to the node that you want to be the drag handle. This is a number of props that need to be applied to the Draggable node.
If you need more information feel free to read from the documentation
