Reorderability

A Lit controller for reordering items by dragging with mouse, touch or pen, reading the layout from the items themselves.

Installation

npm install @3mo/reorderability

import { ReorderabilityController } from '@3mo/reorderability'

Examples

• Default — Drag an item, or on touch hold it first, so a plain swipe still scrolls.
• Wrapping Grid — Items that wrap onto several lines are hit-tested rather than ordered along one axis.
• Horizontal Row — A horizontal scroller, which scrolls by itself as a drag nears its edges.
• Right To Left — The same row written right to left: the order is read off the items' positions, so nothing about direction is configured.
• Indicator Strategy — strategy: 'indicator' leaves the items in place, stamps drop-before or drop-after on the target and drags a dragImage preview.
• Drag Handle — handle confines the grab to a descendant, here the grip icon.
• Disabled Items — Disabled items can be neither grabbed nor dropped onto, but still move aside for a reorder around them.
• Items With Their Own Controls — excluded: '.actions' keeps each row's own buttons out of the drag, so the whole row drags and its controls keep their clicks.
• Board Of Independent Lists — One controller per column: a card reorders within its column and never travels into another.

API

Exports

| Name | Kind | Description | | --- | --- | --- | | ReorderabilityController | class | Drag-to-reorder for items declared inline in a template. | | ReorderabilityState | enum | |

Links

• Documentation
• Changelog
• Source

License

MIT © 3MO GmbH