declarative-dragging/dragology

项目介绍

Dragology 是一个用于构建高质量拖拽交互界面的 TypeScript 库，主要面向 Web 与 SVG 场景。它的设计围绕两个概念：模型驱动（model-driven）拖拽，即拖拽行为由显式模型控制，而不是散落的事件处理；以及可组合（composable）拖拽，即把较小的行为组合成更复杂的交互。适合需要超越基础 HTML5 拖放能力、做直接操作界面的 React/TypeScript 开发者。

背后的设计思路集中发布在 Declarative Dragging 主页，README 则侧重介绍如何上手这个库本身。

快速使用

库已发布到 npm，在现有项目中安装：

npm install dragology

也可以使用任意包管理器，README 中有说明。目前还没有完整的 API 文档，README 给出三条实用入口：先看 Declarative Dragging 主页了解概念，再看仓库内自包含的 consumer 示例，它展示了在 Vite 项目中导入并使用 Dragology 的方式；还可以直接玩在线演示，对应源码在 src/demos。

要在本地运行演示，先克隆仓库，然后执行：

pnpm install
pnpm run dev

打开 CLI 输出的 Vite 开发服务器地址（通常是 http://localhost:5173），即可看到自动刷新的演示，仓库说明对此有描述。

使用约束

• 项目使用 TypeScript，面向 Web/SVG；文档中的示例环境基于 Vite 与 pnpm，安装库本身使用 npm 或其他包管理器。
• 文档尚不完整。README 明确说明还没有正式文档，并提供了 docs/AGENTS.md，该文件由 LLM 编写、面向 LLM，用来临时替代文档。
• 在仓库内开发需要 pnpm；仅作为依赖使用则不需要克隆仓库。
• 项目采用 MIT 许可证。

HotRepo 点评

仓库目前有 105 个 Star、6 个 Fork。2026-11-04 它出现在 HotRepo 的 TypeScript 新项目榜上，在记录到的一小时窗口内新增 4 个 Star；尚无全语言日榜名次记录。由于只有一次快照且采样窗口很短，同口径的历史不足以判断趋势。技术上值得关注的是它的定位：把拖拽当作模型驱动、可组合的问题来处理，而不是一堆事件处理器；在文档缺失的阶段，它把可运行的演示和 consumer 示例作为主要上手路径。