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

README.md

Swappable

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

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>

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
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 -

Classes

Check out Draggables class identifiers

Example

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