I have a trick for this that I love that is very general:
1. When a user begins dragging, calculate the layouts for all possible drop targets (or perhaps just those that are currently visible).
2. For each of those layouts record the position the dragged objects ends up in.
3. On each mouse movement, select from those positions the one that's closest to the dragged object's current position
4. Render the selected layout
This ends up feeling really good and works for any kind of complex layout / reflow.
The person who described the algorithm made it that way, but I added a `const closeEnoughToSnapDistance = 200` to make it more like Trello; once you get close enough, it will snap.
I'm not surprsied. I suck at CSS and just wanted a basic/brittle example that worked in Chrome. Anyone is free to fork my CodePen and make it better though. :D
> record the position the dragged objects ends up in
Can you explain this in more detail? Don’t you need to actually change the layout to figure this out correctly? Or are you approximating it with the top/left corner of the current element in the same place or something?
EDIT: I read to fast, for some reason I understood step 1 as figuring out the location/bounding box of each drop target, but I think you mean to actually put the dragged object there and let the browser compute the layout.
1. When a user begins dragging, calculate the layouts for all possible drop targets (or perhaps just those that are currently visible). 2. For each of those layouts record the position the dragged objects ends up in. 3. On each mouse movement, select from those positions the one that's closest to the dragged object's current position 4. Render the selected layout
This ends up feeling really good and works for any kind of complex layout / reflow.