Fetching latest commit…
Cannot retrieve the latest commit at this time.



Swappable is built on top of Draggable and allows you to swap elements by dragging over them. No order will be maintained (unlike Sortable), so any draggable element that gets dragged over will be swapped with the source element.


import { Swappable } from '@shopify/draggable';
import Swappable from '@shopify/draggable/lib/swappable';
<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.8/lib/draggable.bundle.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.8/lib/swappable.js"></script>


Check out Draggables API for the base API


Check out Draggables options for the base options


Check out Draggables events for base events

Name Description Cancelable Cancelable action
swappable:start Gets fired when starting to drag true Prevents drag
swappable:swap Gets fired before the source gets swapped true Prevents swap
swappable:swapped Gets fired before the source gets swapped false -
swappable:stop Gets fired when dragging out of a droppable element false -


Check out Draggables class identifiers


This sample code will make list items draggable and allows you to swap them with other draggable elements:

import { Swappable } from '@shopify/draggable';

const swappable = new Swappable(document.querySelectorAll('ul'), {
  draggable: 'li'

swappable.on('swappable:start', () => console.log('swappable:start'));
swappable.on('swappable:swapped', () => console.log('swappable:swapped'));
swappable.on('swappable:stop', () => console.log('swappable:stop'));