question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Figure out the API for nested drop targets

See original GitHub issue

We want to support nested drop target, but make it easy for parent targets to opt out of events when children are active. We have several requirements:

  • No use of e argument for e.stopPropagation and the likes. Ideally, we’ll deprecate e and stop passing it in 1.0.
  • Children shouldn’t decide whether parents get the events. There may be cases when parent cares about over (e.g. to scroll the view) even if it doesn’t handle drag. For this reason, each drop target should be able to decide on its own whether it wants to react to drop and whether it needs to hover.

We already note nesting in acceptDrop: if isHandled is true, this means some child has already handled drop before us (and parent may decide not to do anything in this case). We need a similar API for enter/over/leave as well as their this.getDropState(type).isHovering counterpart. #85 starts this work by adding a nested dustbin example. We want to find a good API to make it work.

There’s an attempt at adding API for this in #76 but it’s currently too noisy. @itrelease, can you please write down the API you’re proposing there? Or else you can reimplement it on top of #85 so we can see where you’re heading.

This issue supersedes #75.

Issue Analytics

  • State:closed
  • Created 9 years ago
  • Comments:11 (6 by maintainers)

github_iconTop GitHub Comments

13reactions
AndAShapecommented, Jan 16, 2018

Is there an example of this? What does comparing monitor.isOver() with monitor.isOver({ shallow: true }) mean?

2reactions
gaearoncommented, May 19, 2015

@deser This is now exposed in 1.0. You can compare monitor.isOver() with monitor.isOver({ shallow: true }) to learn if it’s over the nested target or just the current one.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Building Complex Nested Drag and Drop User Interfaces With ...
A drop target is a container that accepts only certain types of drag sources and upon accepting a drag source, it will perform...
Read more >
Drop targets in nested control - Stack Overflow
I found the issue here. The DragEnter event on the parent was consuming the DragEffect irrespective of type of object being dropped.
Read more >
Drop Targets - React DnD
Drop targets can, too, be nested in one another. Unlike the drag sources, several drop targets may react to the same item being...
Read more >
How To Use The HTML Drag-And-Drop API In React
The dragenter , dragleave , dragover , And drop Events # · The dragenter event fires when a dragged item enters a valid...
Read more >
Creating a Drop Target | Enabling Drag and Drop | Flow
The DropTarget class is a configuration object for the drop target and ... for a drop target will allow either the drag source...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found