DragAndDrop

H5P equivalent

H5P Drag and Drop — sort or classify items into labeled drop targets.

When to use

Use DragAndDrop for classification — sorting risks vs safe actions, mapping tools to teams, or pairing concepts with categories.

Each items entry needs a unique id. Each targets entry lists which item id it accepts via accepts.

Try it

Documentation demo

Use the Live demo, React, AI prompt, and Packaging / Manifest tabs below. Embedded demos disable telemetry, xAPI, and the LMS bridge. For production delivery, use the CLI template src/courseConfig.ts and LMS Go-Live.

Open demo in full tab 

<DragAndDrop
  checkId="channel-dad"
  items={[
    { id: "email", label: "Unknown payment link in email" },
    { id: "portal", label: "IT self-service portal" },
    { id: "phone", label: "Unsolicited callback number" },
  ]}
  targets={[
    { id: "email-risk", label: "Verify before acting", accepts: "email" },
    { id: "phone-risk", label: "Call back via known number", accepts: "phone" },
    { id: "safe", label: "Approved channel", accepts: "portal" },
  ]}
/>

Copy into Cursor, Copilot, or ChatGPT after the vibe coding starter context:

Read lessonkit.json and src/App.tsx before editing.

Add a DragAndDrop block (H5P-style: Drag and Drop) like this example inside the active <Lesson>:

<DragAndDrop
  checkId="channel-dad"
  items={[
    { id: "email", label: "Unknown payment link in email" },
    { id: "portal", label: "IT self-service portal" },
    { id: "phone", label: "Unsolicited callback number" },
  ]}
  targets={[
    { id: "email-risk", label: "Verify before acting", accepts: "email" },
    { id: "phone-risk", label: "Call back via known number", accepts: "phone" },
    { id: "safe", label: "Approved channel", accepts: "portal" },
  ]}
/>

Requirements:
- Import only from @lessonkit/react; use block types from block-catalog.v3.json.
- Keep existing courseId, lessonId, and navigation stable unless I ask to add a lesson.
Sync lessonkit.json — add under course.assessments[]:

{
  "checkId": "channel-dad",
  "kind": "dragAndDrop",
  "question": "Sort channels by risk",
  "items": ["email", "portal"],
  "targets": ["risk", "safe"]
}

- After edits, list changed files and what to verify in the browser (lessonkit dev).

Workflow tips: https://lessonkit.readthedocs.io/en/latest/guides/vibe-coding/prompting-and-workflows.html

Add under course.assessments[]:

{
  "checkId": "channel-dad",
  "kind": "dragAndDrop",
  "question": "Sort channels by risk",
  "items": ["email", "portal"],
  "targets": ["risk", "safe"]
}

Touch behavior

On phones and tablets: tap an item, then tap a target (pick-and-place). Coarse-pointer devices show an on-screen hint and disable HTML5 drag. Pointer drag with visual feedback works where supported. Import @lessonkit/themes/base.css for 44px chips.

See also