4 ms·

This article is about dragging, and I've run into all of the pitfalls and come to the same solutions that Amit talks about. Excellent article! One of the harde

This article is about dragging, and I've run into all of the pitfalls and come to the same solutions that Amit talks about. Excellent article! One of the hardest things I have needed to code from scratch is drag-to-reorder. It seem so natural from a user perspective, but when you get into inconsistently sized items, having to create placeholders between items, detecting edges, going down rabbitholes of box-fitting algorithms... it's a fun challenge :)

pupppet 3y ago
Oof, or drag-to-reorder while supporting nesting.
- alexbock 3y ago
  I've always been surprised that Apple added this functionality to the iOS home screen without having a solution to the reorder vs nesting UI problem. Trying to move an app into a folder often results in the folder deciding to fly out of the way and let the item take its place when you're really trying to drop something on the folder to insert it.
  - slivanes 3y ago
    In IOS, I'm pretty sure you cannot add an app that currently sits on the far right of the screen to a folder anywhere beneath it.
    - fingerlocks 3y ago
      Just tried this, and you can. But it definitely takes more finesse than any other column.
  - 8n4vidtmkvmk 3y ago
    Android has the same problem. Sometimes it lets you drop inside, sometimes it flies away.
aboodman 3y ago
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
  - 3y ago
allenu 3y ago
I had to tackle this problem for my index card app, Card Buddy. [1] It was definitely a fun challenge and I still found a better way to do it later. What I ended up doing is when you pick up a card, I compute the layout as if the card was deleted from the board, and then it becomes easy. Wherever you hover the mouse, I just displace whatever is there. There were still tons of edge cases I had to work out, though, especially when you start editing a new card that hasn’t been “committed” to the data model yet. I had to add the option to shift existing cards out of the way to make room for a phantom card. It helps to recognize that there are just lots of edge cases you have to manually handle. If you try to tackle it as though there’s a more generic/homogeneous solution, you end up going around in circles a bit with the design. I should probably create a blog post on all the different edge cases. As I said, though, I found an even better way to do my layout, which saves on unnecessary computations and makes the layout engine more flexible and user-friendly. (It’s amazing what a difference your choice of data model representation makes on your solution.) It’s been a fun puzzle to solve! [1] https://www.ussherpress.com/cardbuddy/ https://www.ussherpress.com/cardbuddy/
slowhadoken 3y ago
Same. It’s such a simple idea but execution can be brutal. I also took drag select for granted for years too.
deleted 3y ago
[deleted]

pupppet 3y ago

Oof, or drag-to-reorder while supporting nesting.

alexbock 3y ago
I've always been surprised that Apple added this functionality to the iOS home screen without having a solution to the reorder vs nesting UI problem. Trying to move an app into a folder often results in the folder deciding to fly out of the way and let the item take its place when you're really trying to drop something on the folder to insert it.
- slivanes 3y ago
  In IOS, I'm pretty sure you cannot add an app that currently sits on the far right of the screen to a folder anywhere beneath it.
  - fingerlocks 3y ago
    Just tried this, and you can. But it definitely takes more finesse than any other column.
- 8n4vidtmkvmk 3y ago
  Android has the same problem. Sometimes it lets you drop inside, sometimes it flies away.

aboodman 3y ago

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
- 3y ago

allenu 3y ago

I had to tackle this problem for my index card app, Card Buddy. [1] It was definitely a fun challenge and I still found a better way to do it later. What I ended up doing is when you pick up a card, I compute the layout as if the card was deleted from the board, and then it becomes easy. Wherever you hover the mouse, I just displace whatever is there. There were still tons of edge cases I had to work out, though, especially when you start editing a new card that hasn’t been “committed” to the data model yet. I had to add the option to shift existing cards out of the way to make room for a phantom card. It helps to recognize that there are just lots of edge cases you have to manually handle. If you try to tackle it as though there’s a more generic/homogeneous solution, you end up going around in circles a bit with the design. I should probably create a blog post on all the different edge cases. As I said, though, I found an even better way to do my layout, which saves on unnecessary computations and makes the layout engine more flexible and user-friendly. (It’s amazing what a difference your choice of data model representation makes on your solution.) It’s been a fun puzzle to solve! [1] https://www.ussherpress.com/cardbuddy/ https://www.ussherpress.com/cardbuddy/

slowhadoken 3y ago

Same. It’s such a simple idea but execution can be brutal. I also took drag select for granted for years too.

deleted 3y ago

[deleted]