Examples

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.

List

Organize a team-building event
1
Todo
Create and maintain office inventory
1
Todo
Update company website content
1
Todo
Plan and execute marketing campaigns
1
Todo
Coordinate employee training sessions
1
Todo
Manage facility maintenance
1
Todo
Organize customer feedback surveys
1
Todo
Coordinate travel arrangements
1
Todo

Board

Confluence
AlizaSenior Engineer
AlvinPrincipal Engineer
AngieEngineering Manager
ArjunDesigner
BlairSenior Designer
ClaudiaLead Designer
ColinDesign Manager
EdContent Designer
EffieProduct Manager
EliotProgram Manager
Jira
FabianEngineer
GaelSenior Engineer
GerardPrincipal Engineer
HasanEngineering Manager
HelenaDesigner
IvanSenior Designer
KatinaLead Designer
LaraDesign Manager
LeoContent Designer
LydiaProduct Manager
Trello
MaribelProgram Manager
MiloEngineer
MyraSenior Engineer
NarulPrincipal Engineer
NorahEngineering Manager
OliverDesigner
RahulSenior Designer
RenatoLead Designer
SteveDesign Manager
TanyaContent Designer

Grid

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.

Table

Needs updating

Our table example does not line up with our latest design guidelines and needs to be updated.

Status
Description
Assignee
Done
Generated description 0
Tori
Done
Generated description 1
Vania
Done
Generated description 2
Alexander
In Progress
Generated description 3
Aliza
Todo
Generated description 4
Alvin
In Progress
Generated description 5
Angie
In Progress
Generated description 6
Arjun
Todo
Generated description 7
Blair
Todo
Generated description 8
Claudia
Done
Generated description 9
Colin
In Progress
Generated description 10
Ed
In Progress
Generated description 11
Effie
Done
Generated description 12
Eliot
In Progress
Generated description 13
Fabian
In Progress
Generated description 14
Gael
In Progress
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

Tree

File

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.

Drop some images on me!

Drawing

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.

Resizing

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');

Virtual

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.

Task: task:0
1
Todo
Task: task:1
1
Todo
Task: task:2
1
Todo

Was this page helpful?

We use this feedback to improve our documentation.