2

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.

Johnny Prescott
  • 263
  • 6
  • 23

1 Answers1

4

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>
tanmay
  • 7,761
  • 2
  • 19
  • 38
  • 1
    Works Perfectly. After testing, it seems it won't work with onBeforeCapture but rather onDragStart instead. I'm curious to know what's going on in the background for that to happen. The con with onDragStart is that the update takes a couple seconds to go through so it would sometime behave weirdly on some nested components. I had all contionally isDropDisabled set to true by default at the end of DragEnd and it fixed it. In the end, the best method. Thank you. – Johnny Prescott May 29 '21 at 19:42