← All examples

Shared lists

Two lists with the same group name. Items can be dragged within a list or across to the other list.

To do

  • Draft RFC
  • Schedule design review
  • Update changelog

Done

  • Read the migration guide
  • Set up the repo

How it was wired

import { Sortable } from '../src/index.ts'

// Both lists share the group name 'tasks'. Items can move freely
// between any sortables that opt into the same group.
const common = {
  animation: 150,
  draggable: '.sortable-item',
  group: 'tasks',
}

new Sortable(document.getElementById('list-todo'), {
  ...common,
  onAdd: (evt) => console.log('added to todo', evt.item),
  onRemove: (evt) => console.log('removed from todo', evt.item),
})

new Sortable(document.getElementById('list-done'), {
  ...common,
  onAdd: (evt) => console.log('added to done', evt.item),
  onRemove: (evt) => console.log('removed from done', evt.item),
})