fix isOver on nested drop targets (fix #13)

zyzo / react-dnd-mouse-backend

Mouse Backend for react-dnd library

http://zyzo.github.io/react-dnd-mouse-backend/

MIT License

85 stars 30 forks source link

fix isOver on nested drop targets (fix #13) #29

Open qtsd opened 5 years ago

qtsd commented 5 years ago

Current behavior :

find all the drop targets that are under the mouse

Fixed behavior :

take the first element under the mouse
find any drop targets that are either this element or one of its parents
sort them by their position in the DOM (from deep to shallow)

Here is a codesandbox to see the different behavior between html5 and mouse backends (to change the backend, see index.js).

qtsd commented 5 years ago

I realize this technique can have a flaw. If you use a drag layer, it must have pointer-events: none, so the drop targets behind can be triggered normally. Therefore it can be tricky to change the mouse cursor since with pointer-events: none, the cursor css rule is ignored.