atlassian
Multi-type Dragging++ using isDragDisabled
Description
I've been using this library for a while now and I though it was very simple to use at first.
Now that I need to get into more complex dragging, I'm confused as to how others do it.
I have nested "Dropable" with draggable in them. When they're all activated, it kinda works but it's not very user friendly so my intention is to keep the dragging to the same parentType and accept certain type in the droppable as well (multi-type).
What I've been trying to achieve is the following:
Use onBeforeCapture={(captured) => onBeforeCapture(captured)} to capture both information as follow:
const onBeforeCapture = (captured) => {
if (!captured){
return;
}
const elInfo = getElementInfo(captured.draggableId);
if (elInfo){
setdragType({ parentType: elInfo.parentType, type: elInfo.type });
}
};
This way, I set my const [dragType, setdragType] = useState({ parentType: '', type: '' }); state.
With this in mind, I then go to my isDropDisabled={!(['_Column', '_Verticalgroup'].includes(dragType.type) && dragType.parentType === '_Board')}
Which mean if the parent is the main board AND the type of the draggable is either type, the droppable will be enabled. All other droppable that don't meet this shouldn't be.
The idea is to apply this to all my nested component so the draggable can be exchanged between the same parentType as long as the type is within the array.
Idea is great on paper but where the idea doesn't work is with React. The state doesn't update before the isDropDisabled is set and hence make the drag not working. If I drag the same item twice in a row, it will obviously work as the state was updated by then.
How do you guys do it? Am I missing something?
Thanks,
Edit: I have seen the many post about this but I can't see any example of something similar done. Just sometime hinted at.
I also achieved the same effect using similar approach -- setting isDropDisabled based on source.droppableId.
however rbd will fail to detect the the inner droppable area after the parent draggable item being reordered. I still cannot figure out how to fix this.
I also achieved the same effect using similar approach -- setting
isDropDisabledbased onsource.droppableId. however rbd will fail to detect the the inner droppable area after the parent draggable item being reordered. I still cannot figure out how to fix this.
Have you resolved this problem?I also had the same problem
I also achieved the same effect using similar approach -- setting
isDropDisabledbased onsource.droppableId. however rbd will fail to detect the the inner droppable area after the parent draggable item being reordered. I still cannot figure out how to fix this.[  ](https://user-images.githubusercontent.com/12276316/160434688-6a070eef-22e9-40e7-8713-e80de8ea273b.gif) [ ](https://user-images.githubusercontent.com/12276316/160434688-6a070eef-22e9-40e7-8713-e80de8ea273b.gif) [  ](https://user-images.githubusercontent.com/12276316/160434688-6a070eef-22e9-40e7-8713-e80de8ea273b.gif) [  ](https://user-images.githubusercontent.com/12276316/160434688-6a070eef-22e9-40e7-8713-e80de8ea273b.gif) [ ](https://user-images.githubusercontent.com/12276316/160434688-6a070eef-22e9-40e7-8713-e80de8ea273b.gif) [ ](https://user-images.githubusercontent.com/12276316/160434688-6a070eef-22e9-40e7-8713-e80de8ea273b.gif)Have you resolved this problem?I also had the same problem
I also encountered a similar problem as you, it is also nested and needs to be draggable and droppable between each other, so I want to contact you to see if you find a solution
I also achieved the same effect using similar approach -- setting
isDropDisabledbased onsource.droppableId. however rbd will fail to detect the the inner droppable area after the parent draggable item being reordered. I still cannot figure out how to fix this.[  ](https://user-images.githubusercontent.com/12276316/160434688-6a070eef-22e9-40e7-8713-e80de8ea273b.gif) [ ](https://user-images.githubusercontent.com/12276316/160434688-6a070eef-22e9-40e7-8713-e80de8ea273b.gif) [  ](https://user-images.githubusercontent.com/12276316/160434688-6a070eef-22e9-40e7-8713-e80de8ea273b.gif) [  ](https://user-images.githubusercontent.com/12276316/160434688-6a070eef-22e9-40e7-8713-e80de8ea273b.gif) [ ](https://user-images.githubusercontent.com/12276316/160434688-6a070eef-22e9-40e7-8713-e80de8ea273b.gif) [ ](https://user-images.githubusercontent.com/12276316/160434688-6a070eef-22e9-40e7-8713-e80de8ea273b.gif)Have you resolved this problem?I also had the same problem
hey I have to add a dropdown button inside the nested droppable as a workaround. I remember after debugging it is due to some "distance" issue.
I also achieved the same effect using similar approach -- setting
isDropDisabledbased onsource.droppableId. however rbd will fail to detect the the inner droppable area after the parent draggable item being reordered. I still cannot figure out how to fix this.[  ](https://user-images.githubusercontent.com/12276316/160434688-6a070eef-22e9-40e7-8713-e80de8ea273b.gif) [ ](https://user-images.githubusercontent.com/12276316/160434688-6a070eef-22e9-40e7-8713-e80de8ea273b.gif)[  ](https://user-images.githubusercontent.com/12276316/160434688-6a070eef-22e9-40e7-8713-e80de8ea273b.gif) [ ](https://user-images.githubusercontent.com/12276316/160434688-6a070eef-22e9-40e7-8713-e80de8ea273b.gif) [  ](https://user-images.githubusercontent.com/12276316/160434688-6a070eef-22e9-40e7-8713-e80de8ea273b.gif) [  ](https://user-images.githubusercontent.com/12276316/160434688-6a070eef-22e9-40e7-8713-e80de8ea273b.gif) [ ](https://user-images.githubusercontent.com/12276316/160434688-6a070eef-22e9-40e7-8713-e80de8ea273b.gif) [ ](https://user-images.githubusercontent.com/12276316/160434688-6a070eef-22e9-40e7-8713-e80de8ea273b.gif)Have you resolved this problem?I also had the same problem
I also encountered a similar problem as you, it is also nested and needs to be draggable and droppable between each other, so I want to contact you to see if you find a solution
hey I have to add a dropdown button inside the nested droppable as a workaround.