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

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.