声明式拖拽：简化交互开发的新范式

如果定义图表“可以变成什么”，就能让它变得可拖拽，该多简单。

拖放让数字对象变得可触摸、可感知。但定制拖拽交互往往需要编写大量繁琐代码来处理几何形状、反馈和动画。结果是，从教育工作者到游戏设计师，从数学家到创意工具开发者，常常因为门槛太高而选择放弃。

声明式拖拽反转了这个问题。不再直接编程实现所有视觉行为，而是简单声明：对于你想设为可拖拽的每个元素，拖拽它应导向应用的哪些未来状态。我们的系统会投机性地渲染这些状态，计算出物品可以去往的位置，再将这些可能的“世界”结合，形成流畅且响应的拖放交互。

这个项目旨在让人们继续在所处的语义世界中工作，同时帮助他们把这些世界的规则转化为我们数字世界中富有质感的交互。

一段五分钟的视频，介绍声明式拖拽。

工作原理

D2 是模型驱动的：界面作者通过指定拖拽某元素时允许访问哪些未来模型状态，使其变为可拖拽。引擎会投机性地将这些状态渲染为视图树，提取被拖拽元素在各次渲染中的位置，并据此合成拖放交互。全程无需界面作者处理繁琐细节。

为了提供更强的表达能力和可定制性，D2 是可组合的：简单的模型驱动拖放行为可以组合成更复杂的行为，修饰器则可以叠加浮动、吸附、过渡等特性。详情请见论文。

Dragology 演示

我们在名为 Dragology 的库中实现了 D2，它面向 Web 上的 SVG 界面构建。

代数 扭曲的树 bézier 曲线 辫子 牌堆 脸庞 三格骨牌 发芽的树

更多用 Dragology 构建的交互式示例，请看我们的演示画廊。

它从何而来

早在 2022 年，我做了一个游戏的雏形，目标是让数学变得更直观——这是我长期以来的一个执念。这个游戏有很多亮点，但核心机制是从菜单中选择变换，缺少我渴望的那种鲜活的触感。后来我想出了一个粗糙的版本，也就是后来的模型驱动拖拽，但要实现它似乎相当棘手，于是它就在我的白板上搁置了两年，每次我去拿三明治时都会盯着我。 — Andrew

2023 年，在 Seattle 一次非常惬意的徒步中，Andrew 和我分享了他关于拖拽交互的想法。多年来我一直惦记着这些点子，但一直没付诸行动。直到去年，所有线索终于汇聚到了一起。我的好友 Elliot 正在研究树之间的保序映射。我想出了绘制这些结构的一种有趣方式，但很快意识到，我不只满足于静态展示——我想伸手去拨弄它们，感受它们的动态变化（也就是上文提到的扭曲树演示）。起初我觉得这很有难度，直到我想起了 Andrew 的想法。我开始着手开发一个库，在 Andrew 的协助下，这个库最终发展成了声明式拖拽（declarative dragging）。 — Josh

论文之后

Josh 一直在尝试多种更新、更复杂的数学探索应用。我们发现 Dragology 特别适合那些结合并行表示法的界面，在此类界面中，用户可以从不同角度观察同一系统。在下方的置换实验室中，对任意一种表示法进行交互时，其他表示法会随之流畅更新，即使拖拽过程尚未完成，也能实时展示它们之间的关系。

Andrew 一直致力于把声明式拖拽引入现有应用，包括他在编程语言用户界面上的研究，以及重启最初启发这一切的数学游戏项目。

引用

@inproceedings{horowitz2026declarative,
  title     = {Declarative Dragging},
  author    = {Horowitz, Joshua and Blinn, Andrew and Heer, Jeffrey},
  booktitle = {Proceedings of the 39th Annual ACM Symposium on
               User Interface Software and Technology (UIST '26)},
  year      = {2026}
}