Widget practice · Drag & drop

Kanban drag & drop board

Eight cards across four columns — drag any card into any column. Built on the native HTML5 drag-and-drop API so Playwright's locator.dragTo() works most of the time. The collapsible solution shows both that shortcut and the manual mouse.move/down/move/up dance for the rare case where DnD events need precise dispatching.

To do

In progress

Review

Done

id=board data-testid=kanban-board · col-todo / col-in-progress / col-review / col-done cards=data-testid=card-{id} · draggable=true columns=data-status=todo/in-progress/review/done

Drag a card to a different column to see the new state.

What students should practise

Drag card-write-spec from To do into In progress using dragTo().
Drag the same card again with manual mouse events — useful when the page uses bespoke pointer handlers.
Assert each column's count badge updates correctly.
Click Snapshot state and assert the JSON output matches the expected layout.
Reset the board and verify all 8 cards land back in To do.

Playwright solutionBoth dragTo() and the manual mouse fallback. Show solution

// Quick path — works for HTML5-native DnD
await page.getByTestId('card-write-spec')
  .dragTo(page.getByTestId('col-in-progress'));

await expect(page.getByTestId('count-in-progress')).toHaveText('1');

// Manual mouse path — for finicky DnD libraries
async function manualDrag(page, source, target) {
  const sBox = (await source.boundingBox())!;
  const tBox = (await target.boundingBox())!;
  await page.mouse.move(sBox.x + sBox.width / 2, sBox.y + sBox.height / 2);
  await page.mouse.down();
  await page.mouse.move(tBox.x + tBox.width / 2, tBox.y + tBox.height / 2, { steps: 10 });
  await page.mouse.up();
}

await manualDrag(page,
  page.getByTestId('card-fix-bug-42'),
  page.getByTestId('col-done'));

// Verify final state
await page.getByTestId('snapshot-board').click();
await expect(page.getByTestId('board-output'))
  .toContainText('"card-fix-bug-42"');