Conditionally Allow Movement using react-beautiful-dnd Draggable and Droppable Props

InstructorAlex Reardon

Share this video with your friends

Send Tweet

Now that we are able to drag tasks between our task lists, we might not always want a user to move a task to any location. This lesson will explore how we can conditionally allow what can be dragged, and where it can be dragged to.

react-beautiful-dnd provides a robust API for configuring what can be dragged or dropped where. isDragDisabled prop on a <Draggable />, isDropDisabled prop on a <Droppable />, and the <Droppable /> type prop give you fine-grain control to allow whatever business logic you need to implement, control what is draggable and droppable.