@bluecateng/smooth-reorder

Allows reordering a list with either mouse dragging or keyboard using only vanilla JS. Elements are moved with CSS transitions where possible or with @bluecateng/nano-spring, so it feels more natural. The callbacks allow implementation of feedback for accessibility.

The article 4 Major Patterns for Accessible Drag and Drop / Sorting a List in Medium has an example of how to implement accessibility.

Size: 4,102 bytes before compression.

Installation

npm i -S @bluecateng/smooth-reorder

Example

import reorder from '@bluecateng/smooth-reorder';

const container = document.querySelector('#test');
reorder(container, {
	onStart: (element, position) => console.log(`Started moving element ${element} from ${position}`),
	onMove: (element, position) => console.log(`Element ${element} moved to ${position}`),
	onFinish: (element) => console.log(`Element ${element} moved`),
	onCancel: (element) => console.log(`Element ${element} move cancelled`),
});

This CSS must be added to the page:

.draggable {
	cursor: move;
	cursor: grab;
	touch-action: none;
}
.dragging {
	z-index: 1000;
}
.placeholder {
	opacity: 0;
}
.clone {
	position: absolute;
	left: 0;
	top: 0;
	will-change: transform;
}

Output