A feature-rich front-end drag-and-drop component library
source link: https://github.com/atlassian/pragmatic-drag-and-drop
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Fast drag and drop for any experience on any tech stack
📖 Documentation | 🤹 Examples | 🎥 How it works
About
Pragmatic drag and drop is a low level drag and drop toolchain that enables safe and successful usage of the browsers built in drag and drop functionality. Pragmatic drag and drop can be used with any view layer (react
, svelte
, vue
, angular
and so on). Pragmatic drag and drop is powering some of the biggest products on the web, including Trello, Jira and Confluence.
Capabilities
What is this repository?
This repository is currently one way mirror from our internal monorepo that contains all the code for Pragmatic drag and drop.
The intention of this repository is to make public our code, but not to accept code contributions (at this stage). In the future we could explore setting up a two way mirror so that contributions to this repo can also make their way back to our monorepo. You are still welcome to raise issues or suggestions on this repository!
All documentation and npm
packages are public and available for use by everyone
Can I use this with my own Design System?
Yep! Pragmatic drag and drop as a small core package, and then a range of optional packages. Some of the optional packages have dependencies on styling solutions (eg emotion
), view libraries (eg react
) or on some additional Atlassian outputs (eg @atlaskit/tokens
). We have separated out optional packages that have other dependencies so they can be easily swapped with your own pieces that use your own tech stack and visual outputs.
Can I use my own design language?
Yep! We have created some design guidelines which embody how we want to achieve drag and drop in our products, and some of those decisions are embodied in some optional packages. However, you are free to use whatever design language you like, including ours!
What is @atlaskit
?
The Pragmatic drag and drop packages are published under the @atlaskit
namespace on npm
import { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
@atlaskit
is the npm
namespace that we publish all of our public packages on from inside our internal monorepo. We could look at creating a separate namespace in the future just for Pragmatic drag and drop. If we do that, we'll release some tooling to help folks automatically switch over.
Credits
Made with love by:
Pragmatic drag and drop stands on the shoulders of giants, including the folks who created the drag and drop specifications, implemented drag and drop in browsers, and the many drag and drop libraries that came before this.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK