search

hello-pangea / dnd

💅 Beautiful and accessible drag and drop for lists with React. ⭐️ Star to support our work!
https://dnd.hellopangea.com
Other
2.48k stars 95 forks source link

Is adding an onDragOver handler possible? #808

Open tobewisebeforeiamold opened 4 months ago

tobewisebeforeiamold commented 4 months ago

Description

I was trying to add an onDragOver handler of my own, so I can tell when one Draggable is mostly over other. I was going to use an IntersectionObserver with a percentage so I can tell if one Draggble is X% over the other, but I saw that the Draggable DOM objects aren't actually being dragged. CSS transforms are being used.

I imagine inside of DragDropContext there's some indication of the positions of the various DOM elements. Would it be possible to expose the "virtual" positioning in some way so that we could tell if a Draggable is X% over another Draggable (or maybe even over any DOM element)?

And of course I thank you for taking the time this great package?

tobewisebeforeiamold commented 4 months ago

I ended up making a new context with drag-over and a drag-inline/out-of-line handlers. I had to track refs for all of the items, and use a MutationObserver on the dragging-item to compare it to all of the other non-dragging items, and determine if their rectangles overlap, and if so by how much. If it's over a threshold then I fire the events.

It's a lot of lines, and it doesn't work quite right yet - items kind of jump around a bit when they split to two columns and back to 1 - but I'll get there.

But soon I hope to have a way to drag an item inline with another item so some rows have N items and others just have 1.

tobewisebeforeiamold commented 4 months ago

In the end I couldn't get it working. The Placeholder here looks to be intended to maintain list height, and the translation done in CSS wouldn't let me make multiple columns on arbitrary rows...