← All examples

Swap plugin

With the Swap plugin enabled, dropping item A on item B exchanges their positions instead of inserting A between siblings.

Alpha
Bravo
Charlie
Delta
Echo

How it was wired

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

// 1. Mount the plugin globally (registers it with the PluginSystem).
Sortable.mount(SwapPlugin.create({ swapClass: 'swap-highlight' }))

// 2. Create the instance.
const sortable = new Sortable(document.getElementById('swap-list'), {
  animation: 150,
  draggable: '.sortable-item',
})

// 3. Install the plugin on this instance.
sortable.usePlugin('Swap')

Note: the swapClass option styles the item under the pointer while you hover, so users see which item will be swapped on drop.