@bluecateng/smooth-reorder

Smooth list reordering in vanilla JS

Usage no npm install needed!

<script type="module">
  import bluecatengSmoothReorder from 'https://cdn.skypack.dev/@bluecateng/smooth-reorder';
</script>

README

@bluecateng/smooth-reorder GitHub license npm version CircleCI

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,145 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

Output