Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.


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


    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.