Swappable

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.

Usage

• NPM:

import {Swappable} from '@shopify/draggable';
// Or
import Swappable from '@shopify/draggable/build/esm/Swappable/Swappable';

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

• Browser (as a module):

<script type="module">
  import Swappable from 'https://cdn.jsdelivr.net/npm/@shopify/draggable/build/esm/Swappable/Swappable.mjs';

  const swappable = new Swappable(document.querySelectorAll('ul'), {
    draggable: 'li',
  });
</script>

• Browser (Standalone):

<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable/build/umd/index.min.js"></script>
<script>
  const swappable = new Draggable.Swappable(document.querySelectorAll('ul'), {
    draggable: 'li',
  });
</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'));