Nested drop targets and canDrop

[djeremh]

I have 2 nested DropTargets.
I want to prevent drop on child droptarget if the drop on parent drop target is disabled.
How can the canDrop() method of the child depend on the canDrop() method of the parent?
I didn't find a way to do that strictly with the current API, I had to rely on components.

Has anybody struggled with this?

Thanks!

[danielrob]

I came here initially because I had the opposite problem... which I solved with monitor.isOver({ shallow: true }) in the canDrop method of both parent and child. I wanted only the child to respond, but found the parent returning false prevented the child from returning true.

Thus I think the behaviour you're describing should be the default behaviour. I'm assuming both accept the same drop types, and that your actual dom elements don't have some wierd stacking issue going on, and that your canDrop isn't getting in the way.

Anyway, I'm not a contributor/collaborator, and just found your issue by chance. You may wish to post a sandbox of your issue, as this always helps library maintainers understand exactly your problem.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[andrewvarga]

@danielrob how did you solve your problem with {shallow: true} ? I'm trying to use that in canDrop and it seems to have no effect. Ideally I would want the children to have priority when dropping, and then the parents.

[bkrmendy]

Hi Andrew! I solved this, what I did is that I called

if (monitor.didDrop()) {
  return;
}

at the beginning of drop in the parent drop context.

Hopefully this helps you too.

[andrewvarga]

Hi Andrew! I solved this, what I did is that I called

if (monitor.didDrop()) {
  return;
}

at the beginning of drop in the parent drop context.

Hopefully this helps you too.

oh, thanks! I have to dig up where I used this but it looks useful:) Nice to see familiar faces here!

[mahmoudilyan]

Look this problem is related to the library itself, when you hover the dragged element into a nestable droppable element. The data you are passing to the droppable element might overlap with the droppable parent or one the ancestors droppable elements. Pass this line in canDrop to take data only from the current Hovered
Take a look how I fix it in my code
`
const handleCanDrop = useCallback((item: any, monitor: any) => {

if (!monitor.isOver({ shallow: true })) {
  return false;
}
const component: IComponent = ComponentsLibrary.getComponentByName(item.name) as IComponent;
const { isMatch, errorMessage } = checkDropRestrictions(component.dropRestrictions, elementRoot);
if (!isMatch) {
  setInvalidDroppingMessage(errorMessage);
} else {
  setInvalidDroppingMessage("");
}
return isMatch;

}, [elementRoot]);
`