Droppable

Droppable

Droppable is built on top of Draggable and allows you to declare draggable and droppable elements via options. Droppable fires four events on top of the draggable events: droppable:start, droppable:dropped, droppable:returned and droppable:stop. Droppable elements must begin in an occupied dropzone (see below, Classes and example), so they may returned if the drag is canceled or returned.

Usage

• NPM:

import {Droppable} from '@shopify/draggable';
// Or
import Droppable from '@shopify/draggable/build/esm/Droppable/Droppable';

const droppable = new Droppable(document.querySelectorAll('.container'), {
  draggable: '.item',
  dropzone: '.dropzone',
});

• Browser (as a module):

<script type="module">
  import Droppable from 'https://cdn.jsdelivr.net/npm/@shopify/draggable/build/esm/Droppable/Droppable.mjs';

  const droppable = new Droppable(document.querySelectorAll('.container'), {
    draggable: '.item',
    dropzone: '.dropzone',
  });
</script>

• Browser (Standalone):

<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable/build/umd/index.min.js"></script>
<script>
  const droppable = new Draggable.Droppable(
    document.querySelectorAll('.container'),
    {
      draggable: '.item',
      dropzone: '.dropzone',
    },
  );
</script>

API

Check out Draggable API for the base API

Options

Check out Draggable 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.

Events

Check out Draggable events for the base events

Name	Description	Cancelable	Cancelable action
droppable:start	Gets fired before dropping the draggable element into a dropzone	true	Prevents drag
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
droppable:stop	Gets fired before dropping the draggable element into a dropzone element	false	-

Classes

Check out Draggable class identifiers for the base class identifiers

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

Example

This sample HTML and JavaScript will make .item elements draggable and droppable among all .dropzone elements:

<div class="container">
  <div class="dropzone draggable-dropzone--occupied">
    <div class="item">A</div>
  </div>
  <div class="dropzone draggable-dropzone--occupied">
    <div class="item">B</div>
  </div>
  <div class="dropzone draggable-dropzone--occupied">
    <div class="item">C</div>
  </div>
</div>

<div class="container">
  <div class="dropzone"></div>
</div>

<style>
  .item {
    height: 100%;
  }
  .dropzone {
    outline: solid 1px;
    height: 50px;
  }
  .draggable-dropzone--occupied {
    background: lightgreen;
  }
</style>

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

const droppable = new Droppable(document.querySelectorAll('.container'), {
  draggable: '.item',
  dropzone: '.dropzone',
});

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