Best way to prototype a click and hold to highlight multiple cells?

Hi there,

What’s the best way to build an interactive prototype with a grid where when you click on a cell, it selects it, and as you hold your mouse down and drag or hover over neighboring cells, it selects those too?

Here’s what I need:

  • Grid of cells that are unselected and have a hover state
  • When you click on a cell, it selects it
  • While still pressing down, move mouse over other unselected cells and select them

Nice to have:

  • Clicking on a selected cell and dragging mouse over other selected cells then unselects them

The expected behavior for selecting is essentially how highlighting cells on Google Sheets works.
I’ve uploaded a gif where I faked the prototype with “after delay”, but it’d be great to actually have an interactive prototype. Thanks!

Daypart-grid-latest