Skip to content

Latest commit

 

History

History
 
 

Collidable

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
 
 
 
 
 
 
 
 

Collidable

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

import { Plugins } from '@shopify/draggable';
import Collidable from '@shopify/draggable/lib/plugins/collidable';
<script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected]/lib/plugins.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected]/lib/plugins/collidable.js"></script>

Options

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.

Events

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 -

Example

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

Plans

  • Improving collision detection for mirror

Caveats

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