# shopify/draggable

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/shopify-draggable).**

18,457 stars · 1,114 forks · JavaScript · MIT

## Links

- GitHub: https://github.com/Shopify/draggable
- Homepage: https://shopify.github.io/draggable
- awesome-repositories: https://awesome-repositories.com/repository/shopify-draggable.md

## Topics

`drag-and-drop` `draggable` `es6` `javascript`

## Description

Draggable is a JavaScript library for implementing draggable elements and sortable lists within a web browser. It provides a functional toolset for creating accessible drag and drop interfaces and a mechanism for dynamically swapping, sorting, and reordering HTML elements in real time.

The library features a cross-input interaction layer that unifies mouse, touch, and force-touch events into a single stream for consistent behavior across different devices. It specifically includes tools for providing screen reader feedback and assistive technology support to ensure drag operations are accessible to users with visual impairments.

The project covers layout management through the definition of droppable zones and the prevention of element overlap. It handles dynamic element sorting, position swapping, and the real-time updating of the document order, with visual transitions controlled via CSS selectors.

## Tags

### User Interface & Experience

- [Accessible Interfaces](https://awesome-repositories.com/f/user-interface-experience/drag-and-drop-libraries/accessible-interfaces.md) — Provides a specialized toolset for implementing drag and drop interfaces with built-in screen reader and assistive technology support.
- [List Reordering Components](https://awesome-repositories.com/f/user-interface-experience/list-reordering-components.md) — Provides components for the real-time visual rearrangement and document order updating of items within lists. ([source](https://shopify.github.io/draggable))
- [Coordinate-Based Position Calculators](https://awesome-repositories.com/f/user-interface-experience/coordinate-based-position-calculators.md) — Calculates element placement and collisions by analyzing bounding rectangles of the live DOM.
- [Cross-Device Input Handlers](https://awesome-repositories.com/f/user-interface-experience/cross-device-input-handlers.md) — Unifies mouse, touch, and force-touch events into a single interaction stream for cross-device consistency.
- [Drag and Drop Libraries](https://awesome-repositories.com/f/user-interface-experience/drag-and-drop-libraries.md) — A JavaScript library for implementing draggable elements and sortable lists using various input methods.
- [Element Positioning](https://awesome-repositories.com/f/user-interface-experience/element-positioning.md) — Enables the reordering of lists by updating the coordinate location of visual components during drag operations. ([source](https://github.com/shopify/draggable#readme))
- [Multi-Input Interaction Handlers](https://awesome-repositories.com/f/user-interface-experience/multi-select-inputs/multi-input-interaction-handlers.md) — Normalizes mouse, touch, and force-touch events into a single interaction stream for consistent cross-device drag and drop. ([source](https://shopify.github.io/draggable))
- [Screen Reader Live Regions](https://awesome-repositories.com/f/user-interface-experience/screen-reader-live-regions.md) — Provides mechanisms to announce custom drag-and-drop status updates to screen readers via live region updates. ([source](https://shopify.github.io/draggable))
- [Movement Animations](https://awesome-repositories.com/f/user-interface-experience/css-styling/movement-animations.md) — Allows customization of the visual style and motion of dragged elements using CSS selectors. ([source](https://shopify.github.io/draggable))
- [CSS Transitions](https://awesome-repositories.com/f/user-interface-experience/css-transitions.md) — Controls the visual motion and appearance of dragged elements using CSS selectors and transitions.
- [Overlap Detection Systems](https://awesome-repositories.com/f/user-interface-experience/element-positioning-utilities/overlap-detection-systems.md) — Prevents dragged elements from entering restricted zones to avoid overlapping other interface items. ([source](https://shopify.github.io/draggable))
- [Interactive UI Components](https://awesome-repositories.com/f/user-interface-experience/interactive-ui-components.md) — Enables the creation of web interfaces where users can move and rearrange elements interactively.
- [Droppable Zone Definitions](https://awesome-repositories.com/f/user-interface-experience/interactive-ui-elements/interactive-element-registries/droppable-zone-definitions.md) — Supports the definition of specific target areas that accept and react to elements being dragged over them. ([source](https://github.com/shopify/draggable#readme))
- [Layout Managers](https://awesome-repositories.com/f/user-interface-experience/layout-managers.md) — Defines specific droppable zones and restricts element movement to maintain a structured page layout.
- [Position Swapping](https://awesome-repositories.com/f/user-interface-experience/position-swapping.md) — Implements the ability to exchange sequence indices of two elements during drag operations to maintain layout dimensions. ([source](https://shopify.github.io/draggable))

### Part of an Awesome List

- [Touch and Mouse Events](https://awesome-repositories.com/f/awesome-lists/devtools/touch-and-mouse-events.md) — Ensures consistent drag and drop behavior across mouse, touch, and force-touch input methods.

### Software Engineering & Architecture

- [DOM Node Reorderers](https://awesome-repositories.com/f/software-engineering-architecture/trees/tree-node-reorderers/dom-node-reorderers.md) — Updates the physical order of HTML elements in the DOM tree in real time during drag operations.
- [Drag Lifecycle Events](https://awesome-repositories.com/f/software-engineering-architecture/event-driven-architectures/drag-lifecycle-events.md) — Tracks the drag lifecycle from start to end using an internal state machine to trigger callbacks.

### Web Development

- [DOM Element Manipulators](https://awesome-repositories.com/f/web-development/dom-element-manipulators.md) — Provides a mechanism for dynamically swapping, sorting, and reordering HTML elements within the DOM.