React-DnD: Using IsDropDisabled to disable dropping wrong element type

Question

I've been trying to find an answer to this for a while now and the library, while being very nice and well done... lack very much in clear documentation. I'm hoping to partipate in improving it once I get a clear understanding of it.

Here's what I'm trying to accomplish.

I have a hierarchy of object that is quite complex and multiple draggable type can be mixed in the same level and some of these can even have childrens that are these same dragable.

That render the "type" property not working for me. I want to combine "IsDropDisabled" with "draggingOverWith" to make it happen instead and manage the complexity there.

Basically, the idea is that when the item I'm currently dragging is passing "over" a potential dropable, I want to check the type against an "allowed" array of type and allow it if the type is right.

For that, I want to access "snapshot.draggingOverWith" from the Droppable but the issue is... that "IsDropDisabled" is above in the code hierarchy so I'm kinda of lost as to how the code in the library actually does that comparison.

The idea would be something like that:

<Droppable droppableId={props.verticalgroup.id} isDropDisabled={() => {CompareTypes(snapshot.draggingOverWith, ['Type1', 'Type3'])}>
    {(provided, snapshot) => (
        <div
            {...provided.droppableProps}
            ref={provided.innerRef}
            className={snapshot.isDraggingOver ? 'changeBackground' : ''}
        >
            ...[Other Code]
        </div>
    )}
</Droppable>

Thanks for helping.

Answer 1

I think you could try to use the onDragStart method from the DragDropContext and send required information to Droppable for isDropDisabled to work conditionally.

Like they do here on their egghead course video.

const [isDropDisabled, setIsDropDisabled] = useState(false);

const onDragStart = (task) => {
  setIsDropDisabled(task.something === 'xyz') // <= your condition goes here
} 

and

<DragDropContext onDragStart={this.onDragStart} ...>
  ...
</DragDropContext>

lastly, in your Droppable use that as value

<Droppable droppableId={props.verticalgroup.id} isDropDisabled={isDropDisabled}>
    {(provided, snapshot) => (
        <div
            {...provided.droppableProps}
            ref={provided.innerRef}
            className={snapshot.isDraggingOver ? 'changeBackground' : ''}
        >
            ...[Other Code]
        </div>
    )}
</Droppable>