Dragging and dropping to reorder cards has gotten really finicky

jkomoros / card-web

The web app behind thecompendium.cards

Apache License 2.0

56 stars 8 forks source link

Dragging and dropping to reorder cards has gotten really finicky #335

Open jkomoros opened 4 years ago

jkomoros commented 4 years ago

Noticed while working on #304. The card preview gets in the way, and it can get in a (slow!) loop where the drop target shows up then goes away, etc. It makes bisects really hard to pinpoint where it happened...

jkomoros commented 4 years ago

Seems to get weirder if you drag the card and pause. If you drag to the drop target and then drop before card preview shows up it's much more consistent

jkomoros commented 4 years ago

When the loop starts of it bouncing in size, events seem to queue up and it keeps on bouncing afterwards. Is there a way to debounce that somehow?

jkomoros commented 4 years ago

Make it so that card-previews are disabled during dragging, they get in the way and make the drop targets go wonky

jkomoros commented 4 years ago

[x] Dragging a card to reorder only works from the ~bottom half of the card thumbnail.
[x] If you drag a card and drop it on the spacer that was underneath it to start, it jumps in front of the card in front of it instead of being a no op. (Huh?) Dragging multiple up or down works correctly.

jkomoros commented 4 years ago

The dragging only working for the bottom half of a thumbnail appears to be where it overlaps with spacer. But the spacer appears to be z-indexed beneath the thumbnail by default. And making them display:none and only turning them on when dragging is true on the container doesn't work, you can't trigger dragging in general.

When the drag starts in a region that is over top of the spacer drop target, then _dragging is set to the thumbnail, but then dragend is immediately called (drop isn't called), perhaps because the rerender happens immediately, which puts the spacer high in the z-index, which then basically drops the item immediately. (Or something?)

yeah, if the z-index doesn't change then the bug doesn't happen.