Droppable

About

The dropzones are the elements marked data-droppable-zone inside the container, and the items are their children, or the elements data-droppable-items selects. An item dragged over an empty dropzone moves into it; dragged back over its own, or let go outside every dropzone, it goes home. A dropzone holding an item is occupied, so the markup needs no marker for it.

From the keyboard, Space or Enter picks up the focused item, the arrow keys move it to the previous or next free dropzone, Space or Enter drops it and Escape puts it back. Give each dropzone an aria-label so its name is announced; one without is announced by its data-droppable-zone value. Containers with the same data-droppable-group share their dropzones. droppable:change fires once an item has landed in a different dropzone.

Usage

Register the component and the framework loads it the first time a page contains [data-droppable].

import { Parallelogram } from '@parallelogram-js/core';

const app = Parallelogram.create();
app.components.add('[data-droppable]', () => import('@parallelogram-js/core/components/Droppable'));
app.run();

The framework is optional. Droppable.enhanceAll() mounts the component on every matching element by itself, for a page that wants one enhancement rather than a framework:

import Droppable from '@parallelogram-js/core/components/Droppable';

Droppable.enhanceAll();

It takes a selector and the component's options, and returns the instance it mounted them with. What it leaves out is what the framework adds: loading a component only on the pages that use it, mounting again after a page swap, and ordering with dependsOn.

Its styles come from the package stylesheet:

@import '@parallelogram-js/core/styles/draggable.css';

Acknowledgements

Droppable is built on Shopify Draggable, used under the MIT licence. Copyright (c) 2018-present Shopify.

The drag engine, its Mirror, Scrollable and Focusable plugins, and the Sortable, Swappable and Droppable behaviour are ported from Draggable 1.2. A single Pointer Events sensor replaces its mouse, touch and force-touch sensors, the keyboard sensor is new, and state is written to data attributes rather than classes. Thank you to Shopify and Draggable's contributors for the work this builds on.