Svelte — Copy items

comins-sortable@0.1.6Svelte

ReactVueSvelteVanilla JS

Create copies with unique IDs in Svelte while retaining the source, and verify cancellation and reverse rejection.

Steps and expected results

1. Drag the Note handle from the catalog into the empty board. Both source items remain and one copy appears.
2. Copy the same Note again. The board contains two copies with distinct IDs.
3. Dragging a copy back into the catalog is refused; this example permits delivery only from catalog to board.
4. Start a source drag and cancel with Escape. List membership remains unchanged.
5. Reset restores the source order and clears the board. The ID sequence is not reused.

Dragging uses pointer input. Inspect the onAfterDrag status and displayed IDs to verify the result.

Copy policies

Area	Setting	Meaning
Source	group: { name: "templates", pull: "copy", put: false }	Copies out and refuses incoming items from other areas.
Destination	group: { name: "templates", pull: false }	Accepts the same group and does not export items.
Both	Different areaId values	Distinguishes area identity in the shared scope.

pull: "copy" retains source items during cross-area delivery. It does not automatically disable reordering within that same area. The source remains visible during a drag while preview and placeholder provide separate feedback.

Svelte state contract

Create a scope from comins-sortable/svelte and attach use:sortable to both elements. Reactive options pass items and commit onItemsChange. Keep DOM identity with {#each ... (item.id)} and destroy the owned scope when the component is removed.

type CopyItem<T> = (item: T, context: CopyItemContext) => T;

Return a new object and a new ID. The example uses spread because items are shallow objects. Add an application-specific cloning policy if nested objects must be edited independently.

Completion and failure

Check onAfterDrag.status === "dropped"; a list update notification alone does not confirm completion. Distinguish Escape, outside drops, and policy rejection from a committed copy. Missing or duplicate IDs and malformed copy results are not valid copies.

The ID counter is local to one demo instance. Persistence or multi-client use needs an application-wide collision-free identity policy. Alt/Option copying, custom previews, and exhaustive malformed-input testing are separate scenarios.

Related documentation

Copy guide · Core lifecycle · Vanilla instance · Transfer with this adapter

Try it live

Preview

Code

SvelteCopy.svelte

<script lang="ts">
  import { onDestroy } from 'svelte';
  import { createSortableScope, sortable } from 'comins-sortable/svelte';
  import 'comins-sortable/styles.css';
  export let lang = 'ko';
  const ko = lang === 'ko';
  type Item = { id: string; label: string };
  const initial: Item[] = [{ id: 'template-note', label: ko ? '메모' : 'Note' }, { id: 'template-chart', label: ko ? '차트' : 'Chart' }];
  let catalog: Item[] = [...initial];
  let board: Item[] = [];
  let result = '';
  let sequence = 0;
  const scope = createSortableScope<Item>({ onAfterDrag: event => { result = `${event.status}: ${event.reason}`; } });
  onDestroy(() => scope.destroy());
  const copyItem = (item: Item): Item => ({ ...item, id: `copy-${++sequence}` });
  $: sourceOptions = { scope, areaId: 'catalog', group: { name: 'templates', pull: 'copy' as const, put: false }, items: catalog,
    itemKey: 'id' as const, copyItem, handle: '.task-handle', onItemsChange: (next: readonly Item[]) => { catalog = [...next]; } };
  $: targetOptions = { scope, areaId: 'board', group: { name: 'templates', pull: false as const }, items: board,
    itemKey: 'id' as const, handle: '.task-handle', onItemsChange: (next: readonly Item[]) => { board = [...next]; } };
</script>
<div class="demo" data-demo="copy-svelte">
  <div class="demo-toolbar"><span>{ko ? '왼쪽 항목을 오른쪽으로 여러 번 드래그하십시오.' : 'Drag an item from the catalog to the board more than once.'}</span><button on:click={() => { scope.cancel(); catalog = [...initial]; board = []; result = ''; }}>{ko ? '초기화' : 'Reset'}</button></div>
  <div class="transfer-board">
    <section class="transfer-column"><div class="list-heading">{ko ? '원본' : 'Catalog'}<span>{catalog.length}</span></div>
      <div class="task-list copy-catalog" data-copy-area="catalog" use:sortable={sourceOptions}>
        {#each catalog as item (item.id)}<div class="task" data-copy-id={item.id}><button class="task-handle" aria-label={`${ko ? '드래그' : 'Drag'}: ${item.label}`}>⠿</button><span>{item.label}</span></div>{/each}
      </div>
    </section>
    <section class="transfer-column"><div class="list-heading">{ko ? '복제본' : 'Copies'}<span>{board.length}</span></div>
      <div class="task-list copy-board" data-copy-area="board" use:sortable={targetOptions}>
        {#each board as item (item.id)}<div class="task" data-copy-id={item.id}><button class="task-handle" aria-label={`${ko ? '드래그' : 'Drag'}: ${item.label}`}>⠿</button><span>{item.label}</span></div>{/each}
      </div>
    </section>
  </div>
  <p role="status">{result || (ko ? '복제 대기' : 'Ready to copy')}</p>
  <pre data-copy-state>{JSON.stringify({ catalog: catalog.map(item => item.id), board: board.map(item => item.id) }, null, 2)}</pre>
</div>