Selectable Cells
Build a grid of 8 by 10 cells where the user can select a rectangle by pressing on one cell and dragging to another.
Requirements
- The selection is every cell inside the rectangle spanned by the cell where the press started and the cell currently under the pointer, in any drag direction.
- The selection updates live while dragging and stays after release.
- Starting a new press replaces the previous selection.
- The status line shows the number of selected cells.
- No text gets selected while dragging, and it works with a mouse and a touch pointer.
Hints
Hint 1
Store only the anchor cell and the current corner cell; whether any cell is selected is derived from the min/max of their rows and columns.
Hint 2
onPointerDown on a cell sets both corners and a dragging flag; onPointerEnter updates the corner while dragging; a pointerup listener on the document ends the drag.
Hint 3
user-select: none and touch-action: none on the grid keep the browser from selecting text or scrolling instead.