Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Is adding an onDragOver handler possible? #808

Open
tobewisebeforeiamold opened this issue Jul 13, 2024 · 2 comments
Open

Is adding an onDragOver handler possible? #808

tobewisebeforeiamold opened this issue Jul 13, 2024 · 2 comments
Labels
suggestion: idea/feature 🎨 Suggestions for features and ideas

Comments

@tobewisebeforeiamold
Copy link

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
Copy link
Author

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
Copy link
Author

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...

@100terres 100terres added the suggestion: idea/feature 🎨 Suggestions for features and ideas label Sep 16, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
suggestion: idea/feature 🎨 Suggestions for features and ideas
Projects
None yet
Development

No branches or pull requests

2 participants