Skip to content

web | docs: shrink grabbed cards and pick them up on a short hold - #49

Merged
yekta merged 1 commit into
masterfrom
feat/card-grab-scale-feedback
Oct 20, 2026
Merged

yekta merged 1 commit into
masterfrom
feat/card-grab-scale-feedback

Conversation

@yekta

@yekta yekta commented Oct 20, 2026

Copy link
Copy Markdown
Contributor

When you grab a project or service card to reorder it, the card now shrinks a little so it's clear it has been picked up. With a mouse, you can also pick a card up by holding it still for a moment. Before, it only picked up once it moved.

  • Hold to pick up: with a mouse, a card is picked up after being held still for 300ms. Moving it still picks it up right away, and moving during the hold doesn't cancel it. Touch and keyboard work as before.
  • Shrink on grab: the card in the drag overlay scales down to 97% over 150ms (animate-card-grab).
  • Grow back on drop: a custom drop animation scales the card back to full size as it lands. It also does this when the card lands where it started, a case dnd-kit's default drop animation skips.
  • Drop placement: dnd-kit now measures the overlay without its transform, so the shrink doesn't change where the card lands.
  • Menu buttons: pressing a card's menu button (aria-haspopup="menu") no longer starts a drag, because those menus open on press. Without this, the new hold would pick the card up.
  • Docs: the projects and environments page now says that pressing and holding a card picks it up.

Both the project cards and the service blocks use these changes through the shared helpers in card-sorting.ts.

- With a mouse, a card is now picked up after being held still for 300ms, not only after it moves. Moving still picks it up right away, and moving during the hold doesn't cancel it.
- The picked-up card in the drag overlay shrinks a little. When it is dropped, it grows back to full size as it lands, even if it lands where it started. dnd-kit's default drop animation skips that case.
- dnd-kit now measures the overlay without its transform, so the shrink doesn't throw off where the card lands.
- Pressing a card's menu button no longer starts a drag, because those menus open on press.
- The docs now say that pressing and holding a card picks it up.
@yekta
yekta merged commit d8d0120 into master Oct 20, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant