Vue — Copy items

comins-sortable@0.1.6Vue

ReactVueSvelteVanilla JS

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

Vue state contract

Uses Vue SFC generic inference in 0.1.6. SortableArea infers item and slot types from modelValue without a component type assertion.

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

VueCopy.vue

<script setup lang="ts">
import { ref } from 'vue';
import { SortableRoot, SortableArea } from 'comins-sortable/vue';
import type { AfterDragResult } from 'comins-sortable/core';
import 'comins-sortable/styles.css';
const props = withDefaults(defineProps<{ lang?: string }>(), { lang: 'ko' });
const ko = props.lang === 'ko';
type Item = { id: string; label: string };
const initial: Item[] = [{ id: 'template-note', label: ko ? '메모' : 'Note' }, { id: 'template-chart', label: ko ? '차트' : 'Chart' }];
const catalog = ref<Item[]>([...initial]);
const board = ref<Item[]>([]);
const result = ref('');
let sequence = 0;
const sourceGroup = { name: 'templates', pull: 'copy' as const, put: false };
const targetGroup = { name: 'templates', pull: false as const };
const copyItem = (item: Item): Item => ({ ...item, id: `copy-${++sequence}` });
function afterDrag(event: AfterDragResult) { result.value = `${event.status}: ${event.reason}`; }
function reset() { catalog.value = [...initial]; board.value = []; result.value = ''; }
</script>
<template>
  <div class="demo" data-demo="copy-vue">
    <div class="demo-toolbar"><span>{{ ko ? '왼쪽 항목을 오른쪽으로 여러 번 드래그하십시오.' : 'Drag an item from the catalog to the board more than once.' }}</span><button @click="reset">{{ ko ? '초기화' : 'Reset' }}</button></div>
    <SortableRoot :on-after-drag="afterDrag">
      <div class="transfer-board">
        <section class="transfer-column"><div class="list-heading">{{ ko ? '원본' : 'Catalog' }}<span>{{ catalog.length }}</span></div>
          <SortableArea v-model="catalog" area-id="catalog" :group="sourceGroup" item-key="id" :copy-item="copyItem" handle=".task-handle"
            :component-props="{ class: 'task-list copy-catalog', 'data-copy-area': 'catalog' }">
            <template #item="{ item }"><div class="task" :data-copy-id="item.id"><button class="task-handle" :aria-label="`${ko ? '드래그' : 'Drag'}: ${item.label}`">⠿</button><span>{{ item.label }}</span></div></template>
          </SortableArea>
        </section>
        <section class="transfer-column"><div class="list-heading">{{ ko ? '복제본' : 'Copies' }}<span>{{ board.length }}</span></div>
          <SortableArea v-model="board" area-id="board" :group="targetGroup" item-key="id" handle=".task-handle"
            :component-props="{ class: 'task-list copy-board', 'data-copy-area': 'board' }">
            <template #item="{ item }"><div class="task" :data-copy-id="item.id"><button class="task-handle" :aria-label="`${ko ? '드래그' : 'Drag'}: ${item.label}`">⠿</button><span>{{ item.label }}</span></div></template>
          </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>
</template>