React-beautiful-dnd: Conditional dropping

[Socha17]

Bug or feature request?

feature request

I am building a page builder that you drop pictures on. There are a few conditions, the pictures come in 3 sizes full page, half page, and quarter page. I got the majority of it working by using the isDropDisabled prop.

The issue I am having is if I place a half page picture on a page first, it no longer has room for a full page picture, but it does have room for another half page picture or 2 quarter page pictures.

So I cant just set isDropDisabled to true.
in this issue https://github.com/atlassian/react-beautiful-dnd/issues/212
@alexreardon mentions you can achieve something similar to this by updating it dynamically based on what is being dragged. Not sure if anything has changed since its an older issue.

But in the Best practices for hooks section it says to avoid any state updates while dragging.
Is there a way to accomplish what I am looking for, while keeping best practices in mind?

I appreciate any advice.

[alexreardon]

Hi @Socha17, I am not sure if I am following your request. Can you please provide some more information: a diagram, gif, or code example would be great

[alexreardon]

I'll close this for now. Please feel free to respond and we can reopen this

[Socha17]

Hi @alexreardon sorry for the delay, here is a diagram attempting to explain the idea.
https://imgur.com/a/siGid

You drag images from the main list onto the pages.
The pages 02 and 03 are full and now have isDropDisabled set to true.

Pages 01 and 04 are not full and have room for more pictures of certain sizes, page 01 has room for 1 more quarter page picture and page 04 has room for one more half page or 2 quarter pages.

With that being said, I cant simply use isDropDisabled since more pictures can be dropped on pages 01 and 04.

I was able to achieve the intended result by using the onDragStart method but I am setting state inside the onDragStart function, and from what I understand altering state inside onDragStart is "bad practice".

Is there another way to achieve what I'm looking for without breaking the best practices, I am worried about performance if there is many more pages.

Thanks!

[williaster]

@alexreardon ^I am encountering a similar issue when I try to toggle isDropDisabled dynamically upon onDragStart using a setState change in my components which seems to be your recommendation here in #212 if I am interpreting correctly?

what is the recommended way to dynamically change isDropDisabled (based on what is being dragged) if we cannot leverage onDragStart? Related to my question in #134