Skip to content

web: fade card drag shadows and keep the drop outline until it lands - #50

Merged
yekta merged 1 commit into
masterfrom
fix/card-drag-hold-polish
Oct 20, 2026
Merged

yekta merged 1 commit into
masterfrom
fix/card-drag-hold-polish

Conversation

@yekta

@yekta yekta commented Oct 20, 2026

Copy link
Copy Markdown
Contributor

Polishes how cards look when you pick them up and drop them.

  • Shadow fades in and out: the grabbed card's shadow now fades in on pickup (new card-shadow-in keyframe) and fades out during the drop animation. Before, it appeared and disappeared all at once. Cards mark the element that carries their shadow with data-card-shadow so the overlay and the drop animation can find it.
  • Drop outline stays until the card lands: dropCard no longer calls dnd-kit's default drop sideEffects. Instead, it sets data-drag-source on the source card until all drop animations finish, so the dashed outline stays in place until the card reaches it. This only replaces the drop animation's visual side effects, which dnd-kit lets you customize through dropAnimation. Sorting, sensors and drop handling still work as dnd-kit intends.
  • Smaller grab scale: grabbed cards now shrink to 96% instead of 97%.
  • Same hold time for mouse and touch: mouse drags now start after a 250ms hold instead of 300ms, the same as touch.

This affects service, service group and project cards.

- The grabbed card's shadow now fades in when it's picked up and fades out during the drop animation. Before, it appeared and disappeared all at once.
- The drop animation no longer runs dnd-kit's default side effects. Instead, it marks the source card with data-drag-source until the animation finishes, so the dashed outline stays in place until the card reaches it.
- Grabbed cards now shrink to 96% instead of 97%.
- Mouse drags now start after a 250ms hold instead of 300ms, the same as touch.
@yekta
yekta merged commit df84912 into master Oct 20, 2026
8 checks 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