Multiple types in Droppable

[Merynek]

I would like to have more types in Droppable component. I found this article in your documentation:

I prepare example when you can see interesting use case. https://codesandbox.io/s/wandering-worker-7wv6i?file=/src/index.js

I need it for nested list where can drop both types of items in common drop zone.

Thank you very much :-)

[jimmy-the-hat]

I'm also battling with conditionally dropping draggables.

I'm trying to achieve three separate <Droppable />s that only accept <Draggable />s that match the same immutable type, and then one single <Droppable /> that accepts all <Draggable />s of all types.

Slightly trivial illustration attached to explain a bit better.

[EdmundsEcho]

This has been a repeated request... for the past two-three years now.

I wonder what the hurdle might be? Performance to find the type within the collection of types?

I was also thinking why not enable passing in a function that determines equality of types? That way you could specify n:n relations between types.

All in all, great library. However, the conditional isDropDisabled and its partner for draggable are both limiting and the least elegant, disparate part of working with RBD.

If I could know more about the challenge, I’d be inclined to help brainstorm this some more. Otherwise, I feel I would be flying blind.

[tscritch]

I may be grossly underestimating the amount of work to accomplish this but taking a look at this function: https://github.com/atlassian/react-beautiful-dnd/blob/82db624d0bbcf2aef260121d249355b30ef1129d/src/view/droppable/connected-droppable.js#L36

Could we just make the type prop of type TypeId | TypeId[] and if it is an array then check if the critical.droppable.type exists in the array? (Might be vice versa there. Little hard to tell just skimming through). Obviously you have to change the type throughout the lib but it would be non-breaking and add the functionality I think people are looking for.

I may give it a go in the morning on my machine.

[tscritch]

Big surprise... underestimated the amount of work to catch all the edge cases. Seems like I was able to get the droppables right but lots of janky-ness with it. Here's a diff of my findings: https://github.com/atlassian/react-beautiful-dnd/compare/master...tscritch:multi-type-droppable (I used indexOf because of the linting rules)

[EdmundsEcho]

Nice work. What do you mean by "janky-ness"?

[tscritch]

When dragging one of the cards either the card would jump around or the columns would. I restricted the types so a user could drag a card out of a column and onto the board but they should not be able to drag another column into another column. And even with the type logic (which I could have messed up), it would still try to make space for a column within the column if I dragged it over another column. And sometimes I would just get an error message and everything would break. I can also record a little video later this week to show what I am talking about. Would love another set of eyes on it if someone is willing to pull my work.

[tscritch]

Here's a recording to show you what's going on: https://www.loom.com/share/ec9831f8e7114c82bad7c34112cae17c Here is my branch again with new changes: https://github.com/atlassian/react-beautiful-dnd/compare/master...tscritch:multi-type-droppable

Like I said in the video, it feels very close but something is just off and as I haven't read the entire codebase, it's hard to know exactly what is wrong. Some hunches:

• Differences in list directions (ie horizontal, vertical)
• Not finding all the type comparison checks
• Missing some addition calculations that should happen to take into account different droppable sizes? (seems unlikely as if they are the same type they could definitely be different sizes)

[dimbslmh]

I'm also battling with conditionally dropping draggables.

I'm trying to achieve three separate <Droppable />s that only accept <Draggable />s that match the same immutable type, and then one single <Droppable /> that accepts all <Draggable />s of all types.

Slightly trivial illustration attached to explain a bit better.

This is doable: https://codesandbox.io/s/kind-khorana-9xxctd?file=/src/App.tsx

[trevor-moore-dev]

I'm also battling with conditionally dropping draggables. I'm trying to achieve three separate <Droppable />s that only accept <Draggable />s that match the same immutable type, and then one single <Droppable /> that accepts all <Draggable />s of all types. Slightly trivial illustration attached to explain a bit better.

This is doable: https://codesandbox.io/s/kind-khorana-9xxctd?file=/src/App.tsx

Out of the box thinking, this is exactly what I was looking for - thank you!