← All examples

Clone mode

The palette uses pull: 'clone' — dragging from it copies the item into the canvas while leaving the original in place.

The canvas also sets duplicateKey: 'alt' — hold Alt while reordering within it to copy the dragged item in place instead of moving it.

Components

  • Button
  • Input
  • Card
  • Modal

Canvas (drop here)

  • Heading

How it was wired

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

// The palette pulls clones and refuses puts — it's a source only.
new Sortable(document.getElementById('palette'), {
  group: { name: 'components', pull: 'clone', put: false },
  animation: 150,
  draggable: '.sortable-item',
  sort: false, // disable reordering within the palette
})

// The canvas accepts items, supports normal reordering, and duplicates
// in place when Alt is held at drop.
new Sortable(document.getElementById('canvas'), {
  group: { name: 'components', pull: false, put: true },
  animation: 150,
  draggable: '.sortable-item',
  duplicateKey: 'alt',
})
Note: group.revertClone is accepted by the type but is not yet implemented in v2 — clones do not animate back to their source position.