src/Plugins/Collidable/README.md
When you use the collidable plugin you can specify which elements you can't drag over and it will freeze
the mirror movement for you. These currently only work with Sortable, Swappable and Droppable.
This plugin is not included by default, so make sure to import it before using.
import {Draggable, Plugins} from '@shopify/draggable';
// Or
import Draggable from '@shopify/draggable/build/esm/Draggable/Draggable';
import Collidable from '@shopify/draggable/build/esm/Plugins/Collidable';
const draggable = new Draggable(document.querySelectorAll('ul'), {
draggable: 'li',
collidables: '.other-list',
plugins: [Plugins.Collidable], // Or [Collidable]
});
<script type="module">
import Draggable from 'https://cdn.jsdelivr.net/npm/@shopify/draggable/build/esm/Draggable/Draggable.mjs';
import Collidable from 'https://cdn.jsdelivr.net/npm/@shopify/draggable/build/esm/Plugins/Collidable.mjs';
const draggable = new Draggable(document.querySelectorAll('ul'), {
draggable: 'li',
collidables: '.other-list',
plugins: [Collidable],
});
</script>
<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable/build/umd/index.min.js"></script>
<script>
const draggable = new Draggable.Draggable(document.querySelectorAll('ul'), {
draggable: 'li',
collidables: '.other-list',
plugins: [Draggable.Plugins.Collidable],
});
</script>
collidables {String|HTMLElement[]|NodeList|HTMLElement|Function}
A css selector string, an array of elements, a NodeList, a HTMLElement or a function returning elements for collidable elements.
| Name | Description | Cancelable | Cancelable action |
|---|---|---|---|
collidable:in | Gets fired when dragging near a collidable element | false | - |
collidable:out | Gets fired when dragging away from a collidable element | false | - |
import {Sortable, Plugins} from '@shopify/draggable';
const sortable = new Sortable(document.querySelectorAll('ul'), {
draggable: 'li',
collidables: '.other-list',
plugins: [Plugins.Collidable],
});
sortable.on('collidable:in', () => console.log('collidable:in'));
sortable.on('collidable:out', () => console.log('collidable:out'));