This page demonstrates some of the experiences that Pragmatic drag and drop enables. These examples use a combination of our core package and optional packages.
This grid example does a simple "swap" when dropping. You can do whatever operations you like with grids (including inserting items based on closest edge). This example does not currently have accessibility wired up.
Needs updating
Our table example does not line up with our latest design guidelines and needs to be updated.
| Status | Description | Assignee |
|---|---|---|
| In Progress | Generated description 0 | Tori |
| In Progress | Generated description 1 | Vania |
| Done | Generated description 2 | Alexander |
| Done | Generated description 3 | Aliza |
| Todo | Generated description 4 | Alvin |
| In Progress | Generated description 5 | Angie |
| Done | Generated description 6 | Arjun |
| Done | Generated description 7 | Blair |
| Done | Generated description 8 | Claudia |
| Todo | Generated description 9 | Colin |
| Done | Generated description 10 | Ed |
| Todo | Generated description 11 | Effie |
| In Progress | Generated description 12 | Eliot |
| In Progress | Generated description 13 | Fabian |
| Done | Generated description 14 | Gael |
| Done | Generated description 15 | Gerard |
| In Progress | Generated description 16 | Hasan |
| In Progress | Generated description 17 | Helena |
| Done | Generated description 18 | Ivan |
| Done | Generated description 19 | Katina |
Use the external adapter to capture files that users drag and drop onto the page.
When requesting files, you should also provide an <input type="file" /> for
usability and accessibility reasons.
Excepted from Success Criterion 2.1.1 - Keyboard (Level A)
This example is excepted from the WCAG Success Criterion 2.1.1 - Keyboard (Level A). The underlying function (freehand drawing) requires input that depends on the path of the user's movement and not just the endpoints.
Due to Success Criterion 2.1.3 - Keyboard (No Exception) (Level AAA), path-dependent input cannot meet Guideline 2.1 at Level AAA.
Wherever possible, this exception should not be relied on, and an alternative input method should be provided.
Accessibility guidance in progress
An investigation is required to decide on appropriate accessible controls for resizing. If you would like us to prioritise this investigation, please reach out.
Code review
console.log('hello world');Pragmatic drag an drop works with any virtual experience: you can add, remove or change any entity you want during a drag operation. This example uses TanStack Virtual, but you can use any virtualization solution you like.
See our virtualization guide for more details.
Was this page helpful?
We use this feedback to improve our documentation.