Latest commit c518fb1 Sep 7, 2018


Sortable is built on top of Draggable and allows you to reorder elements. It maintains the order internally and fires three events on top of the draggable events: sortable:start, sortable:sort, sortable:sorted and sortable:stop.

Make sure to nest draggable elements as immediate children elements to their corresponding containers, this is a requirement for Sortable.


import { Sortable } from '@shopify/draggable';
import Sortable from '@shopify/draggable/lib/sortable';
<script src=""></script>
<script src=""></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
sortable:start Gets fired when drag action begins true Prevents drag start
sortable:sort Gets fired before sorting true Prevents sorting
sortable:sorted Gets fired when the source gets sorted in the DOM false -
sortable:stop Gets fired when dragging over other draggable false -


Check out Draggables class identifiers


This sample code will make list items sortable:

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

const sortable = new Sortable(document.querySelectorAll('ul'), {
  draggable: 'li'

sortable.on('sortable:start', () => console.log('sortable:start'));
sortable.on('sortable:sort', () => console.log('sortable:sort'));
sortable.on('sortable:sorted', () => console.log('sortable:sorted'));
sortable.on('sortable:stop', () => console.log('sortable:stop'));


  • Add copy option, which will allow draggable elements to be copied when dropped in a different container
  • Add removeOnSpill option, which will allow draggable elements to be removed from the DOM when dropped outside a container


  • Needs draggable elements to be immediate children of draggable containers.
  • Currently just appends draggable elements in different containers