Latest commit c518fb1 Sep 7, 2018

README.md

Sortable

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

import { Sortable } from '@shopify/draggable';
import Sortable from '@shopify/draggable/lib/sortable';
<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/sortable.js"></script>

API

Check out Draggables API for the base API

Options

Check out Draggables options for the base options

Events

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 -

Classes

Check out Draggables class identifiers

Example

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'));

Plans

  • 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

Caveats

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