Shopify Draggable — Modular Drag and Drop Library for the Web

Introduction

Shopify Draggable is a modular JavaScript library that provides drag-and-drop primitives for web applications. Built by Shopify for their admin interface, it offers a clean event-driven API with first-class touch and accessibility support.

What Shopify Draggable Does

• Provides four core modules: Draggable, Droppable, Sortable, and Swappable
• Handles mouse, touch, and pointer events with a unified interaction layer
• Fires granular lifecycle events for drag start, move, over, out, and stop
• Supports custom sensors for extending input handling beyond pointer devices
• Includes built-in plugins for mirror elements, snapping, and scroll behavior

Architecture Overview

The library is built on a sensor architecture. Sensors detect user input (mouse, touch, pointer) and emit abstract drag events. The core Draggable class listens to these events, manages the drag lifecycle, and delegates to plugins and modules. Sortable, Droppable, and Swappable extend Draggable with specialized container logic. Mirror elements provide visual feedback during drags.

Self-Hosting & Configuration

• Install the full package or import individual modules for smaller bundles
• Instantiate with a container element and a CSS selector for draggable items
• Customize the mirror element appearance via the mirror plugin options
• Register event listeners for drag lifecycle hooks to add business logic
• Works with any framework by operating on plain DOM elements

Key Features

• Modular design lets you import only the drag behavior you need
• Accessible by default with keyboard navigation and ARIA announcements
• Customizable sensors allow integration with unconventional input devices
• Plugin system for adding constraints, scrolling, and visual feedback
• Framework-agnostic with no dependency on React, Vue, or Angular

Comparison with Similar Tools

• react-beautiful-dnd — React-specific and archived; Draggable is framework-agnostic and maintained
• dnd-kit — React-only with hook-based API; Draggable works with any DOM setup
• SortableJS — single-purpose sorting; Draggable adds droppable and swappable modes
• interact.js — lower-level gesture library; Draggable provides higher-level drag patterns
• HTML Drag and Drop API — native but inconsistent across browsers; Draggable normalizes behavior

FAQ

Q: Does it work with React or Vue? A: Yes. It operates on DOM elements, so it works inside any framework. Community wrappers exist for React and Vue.

Q: Is touch support built in? A: Yes. The touch sensor is included by default and handles mobile drag interactions.

Q: Can I customize what the dragged element looks like? A: Yes. The mirror plugin lets you style or replace the visual clone shown during a drag.

Q: Is it still maintained? A: The library is stable and used in Shopify production. It receives maintenance updates as needed.

Sources

• https://github.com/Shopify/draggable
• https://shopify.github.io/draggable