← All examples

Clone mode

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

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 and supports normal reordering.
new Sortable(document.getElementById('canvas'), {
  group: { name: 'components', pull: false, put: true },
  animation: 150,
  draggable: '.sortable-item',
})
Note: group.revertClone is accepted by the type but is not yet implemented in v2 — clones do not animate back to their source position.