Workshop › Klondike Solitaire › Step 30 of 40

Draw the held cards at the pointer

What we are doing

While dragging, the source pile is drawn without the held cards, and the held cards are drawn last, at the pointer, so they float over everything.

```js
  const hidden = drag && drag.from === key ? drag.index : pile.length
  // The stock, the waste and the foundations only need their top card.
  const first = key[0] === 't' ? 0 : Math.max(0, hidden - 1)
  for (let i = first; i < hidden; i++) drawCardAt(pile[i], x, cardY(key, i))
}
// The held cards follow the pointer, on top of everything.
if (drag) {
  piles[drag.from].slice(drag.index).forEach((card, i) => drawCardAt(card, drag.x - drag.dx, drag.y - drag.dy + i * UP_STEP))
}
```

What it means

hidden: for the pile a card is held from, draw only up to drag.index; for every other pile, all its cards.
forEach((card, i) => ...) runs for each held card, with its position i in the run.
The corner is the pointer minus the grab offset; each card below is UP_STEP lower.

Your turn

In draw, change the loop's last three lines and add the if (drag) block after the loop, as shown. Run and drag a card.

Skills: Drawing on a canvas, Keyboard and mouse input

← Follow the pointer Drop it where you want →

All steps