Latest commit c518fb1 Sep 7, 2018


Droppable is built on top of Draggable and allows you to declare draggable and droppable elements via options. Droppable fires two events on top of the draggable events: droppable:dropped and droppable:returned.


import { Droppable } from '@shopify/draggable';
import Droppable from '@shopify/draggable/lib/droppable';
<script src=""></script>
<script src=""></script>


Check out Draggables API for the base API


Check out Draggables options for the base options

dropzone {String|HTMLElement[]|NodeList|Function} A css selector string, an array of elements, a NodeList or a function returning elements for dropzone elements within the containers.


Check out Draggables events for base events

Name Description Cancelable Cancelable action
droppable:dropped Gets fired when dropping draggable element into a dropzone true Prevents drop
droppable:returned Gets fired when draggable elements returns to original dropzone true Prevents return


Check out Draggables class identifiers

Name Description Default
droppable:active Class added to the droppable container (dropzone) when drag starts draggable-droppable--active
droppable:occupied Class added to the droppable container (dropzone) when it contains a draggable element draggable-droppable--occupied


This sample code will make list items draggable and allows to drop them inside another element:

import { Droppable } from '@shopify/draggable';

const droppable = new Droppable(document.querySelectorAll('ul'), {
  draggable: 'li',
  dropzone: '#dropzone'

droppable.on('droppable:dropped', () => console.log('droppable:dropped'));
droppable.on('droppable:returned', () => console.log('droppable:returned'));