Vanilla JavaScript Adapter

comins-sortable@0.1.6

Playground paths below are local routes for the module repository’s development server. They are not live routes on this documentation site.

Use createSortable from the package root when the DOM is the sortable view.

<ul id="tasks">
  <li data-sortable-id="task-1">Plan</li>
  <li data-sortable-id="task-2">Build</li>
</ul>

import { createSortable } from 'comins-sortable';

const sortable = createSortable('#tasks', {
  areaId: 'tasks',
  item: ':scope > [data-sortable-id]',
  onChange(change) {
    console.log(change.operation, change.orders);
  },
  onError(error) {
    console.error(error);
  },
});

// On page or component disposal:
sortable.destroy();

createSortable moves the DOM before its next-frame verification. Use onChange to update any application model that also stores the order. Item IDs default to data-sortable-id; provide getItemId for another identity source.

Register another area in the same scope with sortable.registerArea(element, options). Keep the returned unregister function and call it before removing that area. destroy() cancels an active drag and releases the entire scope.

Playground: /examples/simple/vanilla

---

Runnable example · Source guide for this version