Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
CollidableEvent Change export statements Mar 2, 2018
Collidable.js setup prettier and fix all files Mar 23, 2018
README.md v1.0.0-beta.8 Sep 7, 2018
index.js Change export statements Mar 2, 2018



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 { Plugins } from '@shopify/draggable';
import Collidable from '@shopify/draggable/lib/plugins/collidable';
<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.8/lib/plugins.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.8/lib/plugins/collidable.js"></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'));


  • Improving collision detection for mirror


  • Currently only bases collision based on mouse cursor and not mirror element