A modern, dependency-free JavaScript library for building highly customizable drag-and-drop interfaces like sortable lists, kanbans, and custom grid reorganization.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install shopify-draggable
2. Manual Installation
Copy the skill folder to one of these locations
~/.openclaw/skills/ <project>/skills/ Priority: Workspace > Local > Bundled
3. Prompt Installation
Copy this prompt to OpenClaw to install it automatically.
Help me install shopify-draggable using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).
Prefer to download?
Get the raw skill files in a ZIP archive.
What is Shopify Draggable?
The @shopify/draggable library is a lightweight, pure JavaScript utility designed to handle complex drag-and-drop interaction patterns. Unlike rigid solutions, it splits its functionality into modular components including Draggable (the core engine), Sortable (for reordering), Droppable (for designated drop zones), and Swappable (for element position swapping). Built without runtime dependencies, it integrates smoothly with modern web frameworks or vanilla JS applications.
As part of the Openclaw Skills ecosystem, developers can utilize this utility to rapidly prototype and build fluid, accessible drag-and-drop interfaces. Supported by a robust plugin and sensor system, it enables developers to handle mouse, touch, and even force-touch events out-of-the-box, adapting easily to responsive web designs.
Shopify Draggable Use Cases
- Creating dynamic Kanban boards and project management dashboards.
- Implementing sortable UI lists, layouts, and drag-and-drop navigation menus.
- Building grid-based item reorganizations and dashboard customizations.
- Defining drop-zone areas with specialized feedback styling for files or cards.
- Setting up game boards and interactive visual organizers requiring element swapping.
How Shopify Draggable Works
- Initialization: Initialize the base Draggable, Sortable, Droppable, or Swappable class, passing target containers and optional configurations.
- Sensor Attachment: The library automatically attaches sensors (Mouse and Touch by default) to listen to user gestures.
- Visual Mirror Creation: On movement, a mirror element is rendered (cloning the source element) to follow the cursor, while the original source is visually hidden.
- Event Propagation: Dispatches rich, cancelable events (e.g.,
drag:start,sortable:sorted,droppable:dropped) throughout the interaction lifecycle. - State Finalization: On release, the library updates indices (for sorting) or container parents (for dropping), and fires cleanup events before finalizing positions.
Shopify Draggable Setup
To begin using this capability within your Openclaw Skills workspace, install the package via npm:
npm install @shopify/draggable
Alternatively, you can load it directly from a modern CDN for quick prototyping:
<script type="module">
import { Draggable, Sortable, Droppable, Swappable } from 'https://cdn.jsdelivr.net/npm/@shopify/draggable/build/esm/index.mjs';
</script>
Shopify Draggable Data Schema & Taxonomy
Module Configuration & Classes Map
This library organizes its interactive structures via configurations and class states. Use the tables below to structure your components:
| Option | Type | Default | Description |
|---|---|---|---|
draggable |
String |
'.draggable-source' |
CSS selector identifying draggable elements |
handle |
`String | null` | null |
delay |
Object |
{} |
Milliseconds delay configuration for mouse and touch |
distance |
Number |
0 |
Minimum drag distance in pixels before triggering |
Custom CSS Classes State Map
| Event Class State | Default Class Hook | Description |
|---|---|---|
container:dragging |
draggable-container--is-dragging |
Applied to the container during drag |
source:dragging |
draggable-source--is-dragging |
Applied to the cloned source |
mirror |
draggable-mirror |
The floating visual mirror element |
Shopify Draggable Advanced Features
- Custom Event Cancellation: Prevent unauthorized movements dynamically by calling
event.cancel()during thedrag:startphase. - Extensible Plugin Ecosystem: Leverage native plugins such as
Collidable,Snappable,Scrollable(auto-scrolling boundaries), and animations for Sort/Swap movements. - Multi-Sensor Support: Easily hook custom sensors like
ForceTouchSensorand native HTML5DragSensoralongside modern mobile Touch sensors. - Dynamic DOM Management: Use instance methods like
addContainer()andremoveContainer()to update active drag-and-drop targets on the fly without re-instantiating.
SKILL.md
Loading
Related Openclaw Skills
text-to-svg
An advanced AI-driven utility that translates natural language descriptions directly into fully compliant, responsive SVG vector graphic code.
Full-Link Data Analysis Engine
An advanced seven-layer analytical engine that converts business agendas into structured, cross-validated reports using dynamically generated Python code.
Web UI Builder
An automated AI coding agent skill that generates complete, responsive frontend page code using a modern React 19, Vite 8, and Tailwind CSS 4 technical stack.
TCFD Climate Risk Screening
A structured AI agent workflow to screen physical and transition climate risks, assess financial materiality, and draft TCFD-aligned disclosure narratives.
Storyboard Master
Storyboard Master is an advanced video storyboard and shooting script generator that transforms creative briefs into production-ready, highly detailed visual plans.
Intelligent Data Analysis Assistant
An LLM-powered data analyst skill that translates natural language queries into read-only SQL, analyzes results, and generates interactive HTML visualizations.
Featured*
