4 ms·

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

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.

sbayeta 3y ago
Very nice
Nezteb 3y ago
I was bored so I made a super simple implementation of this: https://codepen.io/Nezteb/pen/MWZBapL https://codepen.io/Nezteb/pen/MWZBapL
- diath 3y ago
  That doesn't seem to work in Firefox: > TypeError: input.getBoundingClientRect is not a function
  - Nezteb 3y ago
    Womp womp; I'm not sure why. Someday I'll try it out on Firefox and maybe fix it.
- orlp 3y ago
  Doesn't work with touch.
  - Nezteb 3y ago
    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
- ellyagg 3y ago
  I thought they meant the object automatically snaps to the nearest target in real-time.
  - Nezteb 3y ago
    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.
tobr 3y ago
> 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.
- aboodman 3y ago
  Yes, that's what I mean.

sbayeta 3y ago

Very nice

Nezteb 3y ago

I was bored so I made a super simple implementation of this: https://codepen.io/Nezteb/pen/MWZBapL https://codepen.io/Nezteb/pen/MWZBapL

diath 3y ago
That doesn't seem to work in Firefox: > TypeError: input.getBoundingClientRect is not a function
- Nezteb 3y ago
  Womp womp; I'm not sure why. Someday I'll try it out on Firefox and maybe fix it.
orlp 3y ago
Doesn't work with touch.
- Nezteb 3y ago
  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
ellyagg 3y ago
I thought they meant the object automatically snaps to the nearest target in real-time.
- Nezteb 3y ago
  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.

tobr 3y ago

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

aboodman 3y ago
Yes, that's what I mean.