SwitchbackTech
DND from grid to sidebar
Feature Description
As a user, I should be able to drag-and-drop a grid event to the sidebar (someday events) section
Use Case
This will provide the users a more intuitive experience with the app, since sidebar events can be DND'ed to the grid, the opposite should also be supported.
Additional Context
No response
@tyler-dane this feature is not very straightforward unfortunately.
We use custom DND functionality for grid events, while using @hello-pangea/dnd for someday events. This means that they share different context, so it would be impossible to build an intuitive DND experience where we would have a drop highlighting with placeholder shuffling among other things.
We would need to dedicate time to research this thoroughly before working on this.
As a temporary measure that does not need research, I believe we could have a solution where we highlight the someday section (week or month) as the user drags over it, this would be our drop indicator. Once user lets go, we would drop the event to be the last (or first) item of the respective section.
Let me know your thoughts.
@that-one-arab I think the temporary solution is clever. However, I'm worried we'll run into more complications with how snapping from the grid to the sidebar would work. And then taking it out and replacing it with a better solution could be painful.
Instead of rushing into this, I'd rather have you spend time making a concrete plan for how to address DND which could handle this use case, along with others like
- Navigating weeks after holding a someday/regular event at the border of the current week
- Snapping between all day and grid events
- #466
Can you start breaking that down into a RFC or issues after finishing #745 and #731?
After we agree on a plan we might need to shelf it for a bit. However, I think it'd be good to start getting more clear on how to handle DND, as we're going to keep running into limitations with the current architecture
DnDKit has example for this, combining sortable and draggable context together with dragOverlay for placeholder, looks like they just updated examples for multiple containers since I last used them: https://master--5fc05e08a4a65d0021ae0bf2.chromatic.com/?path=/docs/presets-sortable-multiple-containers--basic-setup
I remember there are some tricky parts for ux design+implementation if planning to do overlay and drag across containers though.
I lost all my search history too... disaster...
This was the main issue/thread I ran into: https://github.com/clauderic/dnd-kit/issues/477 but good news that looks like it was officially fixed in Jan. "can not click on a button inside a draggable": https://github.com/clauderic/dnd-kit/issues/1575
This one as well, I remember having to put in some workaround/hacky solution (an attribute) for it, this one looks like still might be open: https://github.com/clauderic/dnd-kit/issues/1657
Another issue I remember having was related to dragging across context especially when the list has nested context, I ended up having to force the list to collapse if it was on the way. I thinking it was related to the couldn't stop the child component drag issue
The overlay, plus multiple nested draggable and droppable context can get really messy with states and easily trigger issue. Dnd offers pretty much everything to be customized, including sensors, where the collisions happen, but I remember it was really hard to customize overlay's styles. It's also tricky to manage states efficient, required some algo there actually