React — Copy items

comins-sortable@0.1.6React

ReactVueSvelteVanilla JS

Create copies with unique IDs in React 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.

React state contract

Two SortableArea components share a scope inside SortableRoot. Connect each area’s items and onItemsChange. Supply copyItem on the source area only. Generate IDs when the copy factory runs, not on every render.

In the published 0.1.4 adapter, changing the group object identity during a copy commit can trigger an area validation error. This example keeps policy objects outside the component. Dynamically changing policies during copying is outside this example’s verified scope.

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

ReactCopy.tsx

import { useRef, useState } from 'react';
import { SortableRoot, SortableArea } from 'comins-sortable/react';
import 'comins-sortable/styles.css';

type Item = { id: string; label: string };
// Keep policy identity stable while the adapter commits a copy.
const sourceGroup = { name: 'templates', pull: 'copy' as const, put: false };
const targetGroup = { name: 'templates', pull: false as const };
export default function ReactCopy({ lang = 'ko' }: { lang?: string }) {
  const ko = lang === 'ko';
  const initial: Item[] = [{ id: 'template-note', label: ko ? '메모' : 'Note' }, { id: 'template-chart', label: ko ? '차트' : 'Chart' }];
  const [catalog, setCatalog] = useState(initial);
  const [board, setBoard] = useState<Item[]>([]);
  const [result, setResult] = useState('');
  const sequence = useRef(0);
  const copyItem = (item: Item): Item => ({ ...item, id: `copy-${++sequence.current}` });
  return <div className="demo" data-demo="copy-react">
    <div className="demo-toolbar"><span>{ko ? '왼쪽 항목을 오른쪽으로 여러 번 드래그하십시오.' : 'Drag an item from the catalog to the board more than once.'}</span><button onClick={() => { setCatalog(initial); setBoard([]); setResult(''); }}>{ko ? '초기화' : 'Reset'}</button></div>
    <SortableRoot<Item> onAfterDrag={event => setResult(`${event.status}: ${event.reason}`)}>
      <div className="transfer-board">
        <section className="transfer-column"><div className="list-heading">{ko ? '원본' : 'Catalog'}<span>{catalog.length}</span></div>
          <SortableArea<Item> areaId="catalog" group={sourceGroup} items={catalog} itemKey="id" copyItem={copyItem}
            handle=".task-handle" onItemsChange={next => setCatalog([...next])} areaProps={{ className: 'task-list copy-catalog' }}>
            {item => <div className="task" data-copy-id={item.id}><button className="task-handle" aria-label={`${ko ? '드래그' : 'Drag'}: ${item.label}`}>⠿</button><span>{item.label}</span></div>}
          </SortableArea>
        </section>
        <section className="transfer-column"><div className="list-heading">{ko ? '복제본' : 'Copies'}<span>{board.length}</span></div>
          <SortableArea<Item> areaId="board" group={targetGroup} items={board} itemKey="id" handle=".task-handle"
            onItemsChange={next => setBoard([...next])} areaProps={{ className: 'task-list copy-board' }}>
            {item => <div className="task" data-copy-id={item.id}><button className="task-handle" aria-label={`${ko ? '드래그' : 'Drag'}: ${item.label}`}>⠿</button><span>{item.label}</span></div>}
          </SortableArea>
        </section>
      </div>
    </SortableRoot>
    <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>;
}