DOCSEARCHbyAlgolia
Submit Docs

Pragmatic drag and drop

repository·main·Indexed 11 days ago

https://github.com/atlassian/pragmatic-drag-and-drop

A low-level, framework-agnostic, and headless toolchain for implementing robust drag and drop experiences using native browser capabilities. Version 1.0.0 provides a tiny core (~4.7kB) compatible with any tech stack (React, Vue, Svelte, Angular) and includes optional extensions for auto-scrolling, visual flourishes, hitboxes, live regions for screen readers, and migration utilities from react-beautiful-dnd.

Tokens
60.8K
Snippets
151
Records
240
Agent score
96%

What's inside Pragmatic drag and drop

  2. Overview of Pragmatic drag and drop

    main

    Pragmatic drag and drop is a low-level, framework-agnostic toolchain designed to enable safe and successful usage of the browser's built-in drag and drop functionality. It is a 'headless' library, meaning it provides the logic and behavior without enforcing any specific visual language or styling, giving developers full control over the UI.

    Key Characteristics

    • Tiny Core: The core package is approximately 4.7kB.
    • Incremental & Headless: You only import the pieces you need, and the library does not dictate how your components look.
    • Framework Agnostic: It works with any view layer, including React, Svelte, Vue, and Angular.
    • Deferred Compatible: You can delay loading core and optional packages to improve page load speeds.
    • Broad Support: Full feature support across Firefox, Safari, Chrome, iOS, and Android.
    • Virtualization Support: Designed to work with virtualized lists and complex experiences.

  4. Overview of @atlaskit/pragmatic-drag-and-drop-react-accessibility

    main

    @atlaskit/pragmatic-drag-and-drop-react-accessibility is an optional package for Pragmatic drag and drop that provides React components designed to assist in setting up accessible drag and drop experiences.

    Dependencies

    To use this package, you must also have:

    • The core @atlaskit/pragmatic-drag-and-drop package
    • react
    • @emotion/react (used for styling)
    • Various Atlassian Design System packages

    Customization

    You are welcome to reimplement the logic from this package using your own tech stack if you prefer not to use Emotion or Atlassian Design System components.

    React 19 Compatibility

    This package includes React 19 in its supported peer dependency range. However, as it is not currently tested directly against React 19, users should monitor for potential issues and report them via GitHub if encountered.

  5. Overview of React drop indicators

    main

    The @atlaskit/pragmatic-drag-and-drop-react-drop-indicator package provides React components for displaying visual drop indicators (e.g., lines or borders) that show users where an item will be dropped.

    These components are designed to work with the @atlaskit/pragmatic-drag-and-drop-hitbox package to visualize hitbox information.

    Key Dependencies:

    • @atlaskit/pragmatic-drag-and-drop (core)
    • @atlaskit/pragmatic-drag-and-drop-hitbox (optional package for hitbox data)
    • react
    • @atlaskit/tokens (for colors)
    • compiled (for styling)

  6. Explore Pragmatic drag and drop implementation examples

    main

    Pragmatic drag and drop provides low-level building blocks to create any web-supported drag and drop experience. The library is composed of a core package and various optional packages.

    Common UI patterns demonstrated in the examples include:

    • Lists: Simple vertical or horizontal lists.
    • Boards: Kanban-style boards (e.g., Trello-like) with support for shadow-based drop placement.
    • Grids: Grid layouts supporting item swapping or insertion.
    • Tables: Drag and drop within tabular data structures.
    • Trees: Hierarchical structures (supports both modern list-item outputs and legacy tree-item outputs).
    • Files: Capturing files dragged from the OS using the external adapter.
    • Side Navigation: Rich interactions within navigation systems.
    • Virtualization: Integration with virtualization libraries like TanStack Virtual to handle large datasets.
    • Drawing & Resizing: Complex interactions like freehand drawing or element resizing.

  8. Use @atlaskit/pragmatic-drag-and-drop-live-region for screen reader messaging

    main
    The @atlaskit/pragmatic-drag-and-drop-live-region package is an optional extension for Pragmatic drag and drop. It provides tools to enable screen reader messaging, which is essential for communicating drag-and-drop state changes and alternative interaction flows to users relying on assistive technologies.

  9. Use @atlaskit/pragmatic-drag-and-drop-react-drop-indicator for visual drop indicators

    main
    The @atlaskit/pragmatic-drag-and-drop-react-drop-indicator package provides React components designed to give users visual feedback about where an item will be placed during a drag-and-drop operation (for example, rendering a line to indicate an insertion point). This is an optional package used to enhance the user experience by making the drop target or insertion point explicit.

  10. Use @atlaskit/pragmatic-drag-and-drop-hitbox to attach interaction information to drop targets

    main
    The @atlaskit/pragmatic-drag-and-drop-hitbox package is an optional extension for Pragmatic drag and drop. It allows you to attach specific interaction information to a drop target, which can be useful for fine-grained control over how drop targets respond to drag interactions.

  11. Use @atlaskit/pragmatic-drag-and-drop-unit-testing for screen reader messaging

    main
    The @atlaskit/pragmatic-drag-and-drop-unit-testing package is an optional utility that enables screen reader messaging for alternative drag-and-drop flows during testing. This allows you to verify that your implementation correctly communicates state changes to users relying on assistive technologies.

  12. Use @atlaskit/pragmatic-drag-and-drop-auto-scroll for automatic scrolling

    main
    The @atlaskit/pragmatic-drag-and-drop-auto-scroll package is an optional extension for Pragmatic drag and drop that enables automatic scrolling during a drag operation. It is designed to work with any configuration of scrollable entities, allowing you to dynamically change how your scrollable containers behave during a drag.