Drag And Drop

Drag And Drop раскладывает элементы списком или рядом и даёт переставлять их: за рукоятку справа строку перетаскивают на новое место, стрелки на рукоятке двигают её на одну позицию. Содержимое строки приходит сниппетом с элементом и индексом; items — bindable, после перестановки зовётся onreorder.

Статус: experimental · в системе с 2026-09 · интерактивность: always (всегда)

Когда использовать

Порядок колонок таблицы, приоритет правил, очередность креативов.

Не использовать:

Порядок не важен — обычный список.
Перенос между списками — это Dualist.

Альтернативы:

dualist — перенос элементов между двумя списками
checkbox-group — выбор без порядка; reorderable — простая перестановка

Приоритет правил

Три правила списком: перетащите за рукоятку или переставьте стрелками.

1. GEO: US, CA
2. Устройства: Desktop
3. Часы: 9–18

<!--
  🟢

  Приоритет правил: три строки, перетаскивание за рукоятку или стрелки на ней.
-->

<script>
import { t } from "$lib/spec/demo-lang.svelte.js";
import DragAndDrop from "$lib/ui/DragAndDrop.svelte";
import Island from "$lib/ui/Island.svelte";

let items = $state([
	{ id: 1, text: "GEO: US, CA" },
	{ id: 2, text: t("Устройства: Desktop") },
	{ id: 3, text: t("Часы: 9–18") },
]);
</script>

<div style="width: 360px;">
	<DragAndDrop bind:items label={t("Приоритет правил")}>
		{#snippet children({ item, index })}
			<Island><span style="font-size: var(--fs-s);">{index + 1}. {item.text}</span></Island>
		{/snippet}
	</DragAndDrop>
</div>

Ряд

Колонки таблицы рядом с той же перестановкой.

Название
Расход
Клики

<!--
  🟢

  Ряд: колонки таблицы с той же перестановкой за рукоятку.
-->

<script>
import { t } from "$lib/spec/demo-lang.svelte.js";
import DragAndDrop from "$lib/ui/DragAndDrop.svelte";
import Tag from "$lib/ui/Tag.svelte";

let items = $state([
	{ id: "name", text: t("Название") },
	{ id: "spend", text: t("Расход") },
	{ id: "clicks", text: t("Клики") },
]);
</script>

<div style="width: 480px;">
	<DragAndDrop bind:items orientation="horizontal" label={t("Порядок колонок")}>
		{#snippet children({ item })}
			<Tag>{item.text}</Tag>
		{/snippet}
	</DragAndDrop>
</div>