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

Simple list on other stacks

We have created simple list example which does not leverage any other Atlassian Design System outputs.

Simple list example, (opens new window)

In order to demonstrate how to use Pragmatic drag and drop on different tech stacks, the community has ported this simple list example to various tech stacks:

List example ports

These examples have been contributed by a mixture of Atlassian and non-Atlassian contributors. Please use caution when viewing and running these examples.



TechnologiesSourceStandalone exampleAuthor(s)
React + TailwindCSS + TypeScriptGithubRun on StackBlitz@alexandereardon
TailwindCSS + TypeScriptGithubRun on StackBlitz@alexandereardon
SolidJS + TailwindCSS + TypeScriptGithubRun on StackBlitz@dotnize

Board

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

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
Todo		Generated description 0
Vania
In Progress		Generated description 1
Alexander
Done		Generated description 2
Aliza
Todo		Generated description 3
Alvin
In Progress		Generated description 4
Angie
Done		Generated description 5
Arjun
Todo		Generated description 6
Blair
Todo		Generated description 7
Claudia
Done		Generated description 8
Colin
Done		Generated description 9
Ed
Todo		Generated description 10
Effie
Done		Generated description 11
Eliot
In Progress		Generated description 12
Fabian
Done		Generated description 13
Gael
Todo		Generated description 14
Gerard
Done		Generated description 15
Hasan
In Progress		Generated description 16
Helena
In Progress		Generated description 17
Ivan
Done		Generated description 18
Katina
Todo		Generated description 19
Lara

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.

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.