dnd-kit- svelte (英语)

dnd 工具包 svelte 5: 可拖动、可滴放和可排序的原始人, 拖动 覆盖和修改器,以 @dnd-kit/dom 带有遗言和附件。 API跟着 @dnd-kit/react因此,它的文档适用于这里, 与斯维尔特 差异.

文件和实例

安装

npm i @dnd-kit-svelte/svelte

要求斯维尔特5.40或以后。 帮助者,例如: move 来自 @dnd-kit/helpers; 插件, 如 Feedback 从 @dnd-kit/dom。 。 。 .

快开始

Hooks通过上下文找到他们的管理器,所以在内部的组件中召唤他们 DragDropProvider。 。 。 .

<!-- draggable.svelte -->
<script lang="ts">
    import { useDraggable } from "@dnd-kit-svelte/svelte";

    const { ref } = useDraggable({ id: "draggable" });
</script>

<button {@attach ref}>Drag me</button>

<!-- droppable.svelte -->
<script lang="ts">
    import { useDroppable } from "@dnd-kit-svelte/svelte";
    import type { Snippet } from "svelte";

    let { id, children }: { id: string; children?: Snippet } = $props();

    const { ref, isDropTarget } = useDroppable({ id: () => id });
</script>

<div {@attach ref} data-over={isDropTarget.current}>
    {@render children?.()}
</div>

<script lang="ts">
    import { DragDropProvider } from "@dnd-kit-svelte/svelte";
    import Draggable from "./draggable.svelte";
    import Droppable from "./droppable.svelte";

    let dropped = $state(false);
</script>

<DragDropProvider onDragEnd={(event) => !event.canceled && (dropped = event.operation.target?.id === "droppable")}>
    {#if !dropped}
        <Draggable />
    {/if}

    <Droppable id="droppable">
        {#if dropped}
            <Draggable />
        {/if}
    </Droppable>
</DragDropProvider>

可排序列表 :

<!-- sortable-item.svelte -->
<script lang="ts">
    import { useSortable } from "@dnd-kit-svelte/svelte/sortable";

    let { id, index }: { id: string; index: number } = $props();

    const { ref, isDragging } = useSortable({ id: () => id, index: () => index });
</script>

<li {@attach ref} data-dragging={isDragging.current}>{id}</li>

<script lang="ts">
    import { DragDropProvider } from "@dnd-kit-svelte/svelte";
    import { move } from "@dnd-kit/helpers";
    import SortableItem from "./sortable-item.svelte";

    let items = $state(["a", "b", "c"]);
</script>

<DragDropProvider onDragOver={(event) => (items = move(items, event))}>
    <ul>
        {#each items as id, index (id)}
            <SortableItem {id} {index} />
        {/each}
    </ul>
</DragDropProvider>

当每个项目为一个元素时,您可以跳过其组件并调用一个 {const …} 内部标记 {#each} (Svelte 5.56或后期):

<script lang="ts">
    import { DragDropProvider } from "@dnd-kit-svelte/svelte";
    import { useSortable } from "@dnd-kit-svelte/svelte/sortable";
    import { move } from "@dnd-kit/helpers";

    let items = $state(["a", "b", "c"]);
</script>

<DragDropProvider onDragOver={(event) => (items = move(items, event))}>
    <ul>
        {#each items as id, index (id)}
            {const { ref } = useSortable({ id, index: () => index })}
            <li {@attach ref}>{id}</li>
        {/each}
    </ul>
</DragDropProvider>

与反应的区别

Svelte 组件不重接, 因此值会改变到钩子作为函数, 值会改变钩子 产品读取通过 .current。 。 。 .

输入是值或得到数. 任何输入字段都可以是一个值,读一次,或者一个函数返回它,读一次 当变化时:

useSortable({
    id: item.id, // fixed
    index: () => index, // follows `index`
    data: () => item,
});

Getter 属性 (get index() { return index; }),而一个组件的剩余道具工作方式相同. 一个田地 值本身是一个函数(accept, (中文(简体) ), collisionDetector, (中文(简体) ), plugins: (defaults) => …)必须被包裹在一个得到的:

import { Feedback } from "@dnd-kit/dom";

useSortable({
    id,
    index: () => index,
    plugins: () => (defaults) => [...defaults, Feedback.configure({ feedback: "clone" })],
});

状态读取通过 .current。 。 。 . isDragging, (中文(简体) ), isDropping, (中文(简体) ), isDragSource 财务报告和审定财务报表 isDropTarget 为: 镜头(Lens<boolean>- 他们 current 自行更新模板.

<div {@attach ref}>{isDragging.current ? "Dragging" : "Idle"}</div>

注释为附件. ref, (中文(简体) ), handleRef, (中文(简体) ), sourceRef 财务报告和审定财务报表 targetRef 继续使用元素 {@attach}。 。 。 .

列表按状态排序 . {\fn黑体\fs22\bord1\shad0\3ahbe\4ah00\fscx67\fscy66\2chffffff\3ch808080}dnd kid's OptimisticSortingPlugin 拖动时重排序 DOM 节点, 此节点按键 {#each} 无法恢复,所以 useSortable 离开默认插件( 退出默认插件 a) plugins: () => (defaults) => … 呼叫回收). 移动项目到 onDragOver 如上,在拖曳时排序,或 内 onDragEnd 在滴水时排序。 以同样方式排序列或组, 其阵列处于状态 .

DragOverlay 做一个片段. 它接收到拖曳源 :

<DragOverlay>
    {#snippet children(source)}
        <Item id={source.id} />
    {/snippet}
</DragOverlay>

API 密码

每个人的行为,都看 文档。 。 。 .

发展

这是 Bun 工作空间: 软件包位于 packages/svelte中,示例网站 docs。 。 。 .

bun install
bun run dev    # the package in watch mode and the examples site
bun run check  # build and type-check everything

许可证

麻省理工学院 哈尼埃尔·乌博古。包含根据dnd工具包改编的代码,参见 注意到.txt。 。 。 .