快速上手solid-dnd：10分钟从零搭建你的第一个拖拽应用，新手友好教程-育师

快速上手solid-dnd：10分钟从零搭建你的第一个拖拽应用，新手友好教程

【免费下载链接】solid-dndA lightweight, performant, extensible drag and drop toolkit for Solid JS.项目地址: https://gitcode.com/gh_mirrors/so/solid-dnd

solid-dnd 是一款专为 SolidJS 前端框架构建的轻量级、高性能、可扩展的拖拽（Drag and Drop）工具库，npm 包名为@thisbeyond/solid-dnd。它零依赖、无需组件重渲染，用纯 CSS transform 实现丝滑的拖拽与列表排序动画。本教程面向新手，带你 10 分钟从零搭建出第一个 solid-dnd 拖拽应用 🚀

🌟 为什么选择 solid-dnd？

相比其他拖拽库，solid-dnd 对新手有 4 个明显优势：

特性	说明
✅ SolidJS 原生	利用 Solid 细粒度响应式原语做协调，不破坏框架特性
✅ 零依赖	只需搭配 solid-js，安装一个包即可
✅ 高性能	拖拽过程无组件重渲染，纯 CSS transform + transition 动画
✅ 可扩展	可自定义传感器、碰撞检测算法和预设（如可排序列表）

所有 API 都从 src/index.tsx 统一导出，一目了然。

📦 第一步：安装 solid-dnd（30秒）

在项目终端中执行：

npm install @thisbeyond/solid-dnd

如果你想顺便阅读它的源码来加深理解，可以先克隆仓库：

git clone https://gitcode.com/gh_mirrors/so/solid-dnd

🧩 第二步：认识 3 个核心概念

solid-dnd 的 API 设计非常直观，核心就三个角色：

DragDropProvider：上下文容器，包裹所有拖拽相关组件；
createDraggable：把一个元素变成"可拖拽项"，源码见 create-draggable.ts；
createDroppable：把一个元素变成"可放置区域"，源码见 create-droppable.ts。

此外还有DragDropSensors组件负责监听指针事件（默认内置 pointer 传感器），以及useDragDropContext钩子提供onDragStart/onDragMove/onDragEnd三个生命周期回调（见 drag-drop-context.tsx）。

⚡ 第三步：搭建最小拖拽应用（5 步走）

以create: solid创建的项目为例，整个应用只需 5 步：

用DragDropProvider+DragDropSensors包裹页面根组件；
写一个Draggable组件：const draggable = createDraggable(id)，再通过 Solid 的use:属性引用挂到<div>上；
写一个Droppable组件：const droppable = createDroppable(id)，同样用use:droppable挂载；
在页面组件里调用useDragDropContext()拿到onDragEnd；
在onDragEnd(({ draggable, droppable }) => ...)中处理放置逻辑。

最小示例核心代码（完整可运行版本见 README.md）：

const Draggable = (props) => { const draggable = createDraggable(props.id); return <div use:draggable>{props.children}</div>; }; const Sandbox = () => { const [, { onDragEnd }] = useDragDropContext(); onDragEnd(({ draggable, droppable }) => { // 在这里处理"拖到目标区域"后的业务逻辑 }); return ( <div> <Draggable id="item-1">拖我</Draggable> <Droppable id="zone-1">放这里</Droppable> </div> ); };

💡新手注意：solid-dnd 在拖拽结束时不会自动移动元素，落点处理完全由你决定——这正是它"简单且自由"的地方。

🔀 第四步：用 createSortable 做可排序列表

如果你的需求是"拖拽排序"（如任务列表、歌单），直接用createSortable一步到位，它内部同时组合了 draggable 和 droppable（见 create-sortable.ts）：

用SortableProvider包裹列表，并传入items（id 数组）；
每个列表项调用createSortable(id)并挂载；
在onDragEnd中根据新的顺序更新items状态，列表即完成重排。

排序过程会自动计算相邻项的位移量并生成平滑过渡动画，无需手写任何样式计算。

🎯 第五步：选择合适的碰撞检测算法

拖拽过程中，solid-dnd 靠"碰撞检测算法"判断当前悬停在哪个放置区域上。src/collision.ts 内置了 3 种常用算法，可按场景选择：

算法	适用场景
`closestCenter`	拖拽元素中心离谁最近就判定为谁，通用首选
`closestCorners`	按最近角点判断，适合尺寸差异大的元素
`mostIntersecting`	重叠面积最大者优先，适合密集网格布局

你也可以自己实现一个CollisionDetector函数传入，完全掌控判定逻辑。