# @dnd-kit-svelte/svelte 中文文档

规范地址：https://npmcn.com/package/%40dnd-kit-svelte/svelte/

版本：0\.2\.0
npm 元数据更新时间：2026-11-05T08:48:01.890Z
中文译文更新时间：2026-11-12T13:23:11.294Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40dnd-kit-svelte/svelte
原文对照：https://npmcn.com/package/%40dnd-kit-svelte/svelte/?lang=original
项目主页：https://svelte-dnd-kit.vercel.app/
源码仓库：https://github.com/hanielu/dnd-kit-svelte

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：58.9 kB，50 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：4 个
- peer 依赖：svelte ^5\.40\.0
- 首次发布：2025-09-04T11:11:05.798Z
- 最新版本发布：2026-11-05T08:48:01.495Z
- 近 30 天下载量：46105（2026-10-13 至 2026-11-11，npm 官方下载统计）
- 已发布版本数：8（近 12 个月 4 个）

## 中文简介

svelte 5 的 dnd- kit : 可拖放、可滴放和可排序的原始人, 拖放的叠加和修饰器, 建于 @ dnd- kit/ dom 有 runes 和附件

## 安装

```sh
npm install @dnd-kit-svelte/svelte
```

也可以使用：`pnpm add @dnd-kit-svelte/svelte`、`yarn add @dnd-kit-svelte/svelte`、`bun add @dnd-kit-svelte/svelte`

## README

# dnd-kit- svelte (英语)

[![npm](https://img.shields.io/npm/v/@dnd-kit-svelte/svelte.svg)](https://www.npmjs.com/package/@dnd-kit-svelte/svelte)

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

**[文件和实例](https://svelte-dnd-kit.vercel.app/docs)**

## 安装

```sh
npm i @dnd-kit-svelte/svelte
```

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

## 快开始

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

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

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

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

```svelte
<!-- 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>
```

```svelte
<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>
```

可排序列表 :

```svelte
<!-- 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>
```

```svelte
<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或后期):

```svelte
<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`。 。 。 .

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

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

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

```ts
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` 自行更新模板.

```svelte
<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` 做一个片段.** 它接收到拖曳源 :

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

## API 密码

| 导出 | 从 |
| --- | --- |
| `DragDropProvider`, (中文(简体) ), `DragOverlay` | `@dnd-kit-svelte/svelte` |
| `useDraggable`, (中文(简体) ), `useDroppable` | `@dnd-kit-svelte/svelte` |
| `useDragDropManager`, (中文(简体) ), `useDragDropMonitor`, (中文(简体) ), `useDragOperation`, (中文(简体) ), `useInstance` | `@dnd-kit-svelte/svelte` |
| `KeyboardSensor`, (中文(简体) ), `PointerSensor`,事件类型(`DragEndEvent`. ) (中文(简体) ) | `@dnd-kit-svelte/svelte` |
| `useSortable`, (中文(简体) ), `isSortable`, (中文(简体) ), `isSortableOperation` | `@dnd-kit-svelte/svelte/sortable` |
| dnd工具包的修饰器, `SnapCenterToCursor`, (中文(简体) ), `AlignTopLeftToCursor`, (中文(简体) ), `OffsetBottomRight` | `@dnd-kit-svelte/svelte/modifiers` |

每个人的行为,都看 [文档](https://svelte-dnd-kit.vercel.app/docs)。 。 。 .

## 发展

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

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

## 许可证

麻省理工学院 [哈尼埃尔·乌博古](https://github.com/HanielU)。包含根据dnd工具包改编的代码,参见 [注意到.txt](https://npmcn.com/package/%40dnd-kit-svelte/svelte/NOTICE.txt)。 。 。 .

## 常见问题

### @dnd-kit-svelte/svelte 是什么？

svelte 5 的 dnd- kit : 可拖放、可滴放和可排序的原始人, 拖放的叠加和修饰器, 建于 @ dnd- kit/ dom 有 runes 和附件

### 如何安装 @dnd-kit-svelte/svelte？

在项目目录运行 npm install @dnd-kit-svelte/svelte，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：svelte（^5\.40\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @dnd-kit-svelte/svelte 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @dnd-kit-svelte/svelte 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @dnd-kit-svelte/svelte 可以商用吗？

@dnd-kit-svelte/svelte 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @dnd-kit-svelte/svelte 的下载量有多少？

根据 npm 官方下载统计，@dnd-kit-svelte/svelte 在 2026/10/13 – 2026/11/11 这 30 天内被下载 46,105 次，日均约 1,537 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @dnd-kit-svelte/svelte 还在维护吗？

最新版本 0\.2\.0 发布于 2026/11/05（8 天前）；至今共发布 8 个版本，其中过去 12 个月发布了 4 个；首次发布于 2025/09/04。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。