Skip to content

Latest commit

 

History

History
73 lines (56 loc) · 2.17 KB

README.md

File metadata and controls

73 lines (56 loc) · 2.17 KB
Raw

Snappable

Snappable simulates a "snap" by hiding the mirror and removing the 'source:dragging' class from the source. It also sets the 'source:placed' class for potential drop animations.

This plugin is not included by default, so make sure to import it before using.

Usage

  • ES6:
import { Draggable, Plugins } from "@shopify/draggable";
// Or
// import Draggable from '@shopify/draggable/lib/draggable';
// import Snappable from '@shopify/draggable/lib/plugins/snappable';


const draggable = new Draggable(document.querySelectorAll('ul'), {
  draggable: 'li',
  plugins: [Plugins.Snappable] // Or [Snappable]
});
  • Browser (All bundle):
<script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected]/lib/draggable.bundle.js"></script>
<script>
    const draggable = new Draggable.Draggable(document.querySelectorAll('ul'), {
      draggable: 'li',
      plugins: [Draggable.Plugins.Snappable]
    });
</script>
  • Browser (Standalone):
<script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected]/lib/draggable.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected]/lib/plugins/snappable.js"></script>
<script>
    const draggable = new Draggable.default(document.querySelectorAll('ul'), {
      draggable: 'li',
      plugins: [Snappable.default]
    });
</script>

Options

No options

Events

Name Description Cancelable Cancelable action
snap:in Gets fired when just before snapping in true Prevents snapping
snap:out Gets fired when snapping out true Prevents snapping out

Example

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

const sortable = new Sortable(document.querySelectorAll('ul'), {
  draggable: 'li',
  plugins: [Plugins.Snappable]
});

sortable.on('snap:in', () => console.log('snap:in'));
sortable.on('snap:out', () => console.log('snap:out'));