[FEATURE] onDragOver

2. Describe the bug

onDragOver of an element is not fired when a motion.div is dragged over the element. This works for native elements.

Repro: https://codesandbox.io/s/nostalgic-mendel-xmijk?file=/src/App.js:944-976

Bigger context: Implementing a drag and drop with framer-motion

4. Steps to reproduce

Steps to reproduce the behavior:

1. Drag the motion.div (blue) over “bucket” - nothing happens
2. Drag the div without motion (grey) over “bucket” - fires onDragOver

5. Expected behavior

Both should fire onDragOver events.

7. Environment details

Chrome Version 80 on Mac OS Mojave 10.14.6

[anki247]

Meanwhile a workaround I use:

• As soon you start dragging set the pointer-events: none of the drag element
• on the dropzone the events mouseenter and mouseleave will now fire, which enables you the possibility 😁 Hope this helps

[tpict]

This would be really helpful for complex reordering–presumably we could render some elements as drag targets with onDragEnter instead of manually checking for position overlap (which works great for 1D reordering).

I’m interested in writing a PR for this, but it would be good to get some conversation going about how this would work.

It seems that native ondragenter is fired when the mouse pointer enters the element’s bounding rect, which isn’t ideal. It feels much nicer to fire drag enter events on “is the dragged element’s center within the target bounds?”. This is what the Reorder component does. Do we want to enforce that behavior, even if it differs from the native equivalent?

Are simultaneous drag events on different elements supported? I’m not super clued in to touch gestures.