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

Dark theme
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 + TailwindCSSGithubRun on StackBlitz@alexandereardon
TailwindCSSGithubRun on StackBlitz@alexandereardon
SolidJS + TailwindCSSGithubRun on StackBlitz@dotnize
Vue 3 + TailwindCSSGithubRun on StackBlitz@frenicohansen
Vue 3 + Nuxt 3 (SSR) + TailwindCSSGithubRun on StackBlitz@frenicohansen

Board

Dark theme
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

Board with shadows

A board example that leverages shadows for drop placement (like Trello).

This example does not have our accessibility guidelines wired up to keep the code simpler. It is built on React, TailwindCSS (for styling) and Lucide (for icons).

For Atlassians: please do not leverage shadows for drop placement in Atlassian experiences. Trello being the only exception to this rule.

Shadow based drop placement does not follow our design guidelines that have been agreed on by craft and leadership. Our chosen design affordances have been chosen because they scale well across a huge variety of experiences in a consistent way. This predictability is important for our users. Our chosen affordances are also performant and easy to get right.

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.

Dark theme

Table

Needs updating

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

Dark theme
Status
Description
Assignee
Todo		Generated description 0
Vania
Done		Generated description 1
Alexander
Todo		Generated description 2
Aliza
Todo		Generated description 3
Alvin
Todo		Generated description 4
Angie
Todo		Generated description 5
Arjun
In Progress		Generated description 6
Blair
In Progress		Generated description 7
Claudia
Todo		Generated description 8
Colin
In Progress		Generated description 9
Ed
Done		Generated description 10
Effie
Done		Generated description 11
Eliot
In Progress		Generated description 12
Fabian
In Progress		Generated description 13
Gael
In Progress		Generated description 14
Gerard
In Progress		Generated description 15
Hasan
In Progress		Generated description 16
Helena
Done		Generated description 17
Ivan
Done		Generated description 18
Katina
In Progress		Generated description 19
Lara

Tree

Dark theme

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.

Dark theme
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.

Dark theme

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.

Dark theme

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.

Dark theme
Task: task:0
1
Todo
Task: task:1
1
Todo
Task: task:2
1
Todo

Iframes and external applications

Pragmatic drag and drop enables you to attach data for external systems (other brower tabs, iframes or even native applications), as well as respond to and recieve data being dragged from external systems.

External example

atlassian.design currently does not support displaying an example without the page layout, so our iframe example is hosted on another site.

Drag and drop into and out of iframes, (opens new window)View source, (opens new window)Presentation, (opens new window)
Was this page helpful?
We use this feedback to improve our documentation.