Declarative Dragging

Declarative Dragging Joshua Horowitz, Andrew Blinn, Jeffrey Heer ★ Best Paper Award, UIST 2026 What if making a diagram draggable was as simple as specifying what it can become? Drag-and-drop makes the digital graspable. But designing bespoke drag interactions involves a lot of fiddly code to handle geometry, feedback, and animations. As a result, many people, from educators to game designers, mathematicians to creative tool builders, often don’t bother.

声明式拖拽 Joshua Horowitz, Andrew Blinn, Jeffrey Heer ★ UIST 2026 最佳论文奖。如果让图表变得可拖拽就像指定它能变成什么一样简单，会怎样？拖拽操作让数字内容变得触手可及。然而，设计定制的拖拽交互需要编写大量繁琐的代码来处理几何形状、反馈和动画。因此，许多人，从教育工作者到游戏设计师，从数学家到创意工具开发者，往往对此望而却步。

Declarative dragging inverts the problem. Rather than programming all that visual behavior directly, you simply say, for each element you want to make draggable, which future states of your application dragging it should lead to. Our system speculatively renders those states to work out where things can go, then combines these possible worlds into a smooth, responsive drag-and-drop interaction.

声明式拖拽颠倒了这个问题。你无需直接编写所有视觉行为，只需针对每个想要实现拖拽的元素，说明拖拽它应该导向应用程序的哪些未来状态。我们的系统会推测性地渲染这些状态以计算出元素可以移动到的位置，然后将这些可能的“世界”组合成流畅、响应迅速的拖拽交互。

Our goal with this project is to let people keep working within the semantic worlds they inhabit, while helping them turn the rules of their worlds into rich tactile interactions in ours. A five-minute video introducing declarative dragging.

我们这个项目的目标是让人们能够继续在他们所处的语义世界中工作，同时帮助他们将这些世界的规则转化为我们系统中的丰富触觉交互。一段介绍声明式拖拽的五分钟视频。

How it works D2 is model-driven: An interface author makes an element draggable by specifying which future model states should be accessible by dragging it. An engine speculatively renders these states to view trees, extracts the position of the dragged element in each of these renderings, and uses these to synthesize a drag-and-drop interaction, all without detailed work required by the interface author.

工作原理：D2 是模型驱动的：界面作者通过指定拖拽元素后可访问的未来模型状态，使其变得可拖拽。引擎会推测性地将这些状态渲染为视图树，提取被拖拽元素在每个渲染中的位置，并利用这些信息合成拖拽交互，整个过程无需界面作者进行繁琐的细节工作。

Dragology is a library implementing “declarative dragging”: a new way for interface developers to make higher-quality drag-and-drop interactions with less work. Dragology enables model-driven dragging. To provide greater expressive range and customizability, D2 is composable: simple model-driven drag-and-drop behaviors can be combined to create more complex ones, and modifiers can layer features like floating, snapping, and transitions. For more details, see the paper.

Dragology 是一个实现“声明式拖拽”的库：它为界面开发者提供了一种以更少工作量实现高质量拖拽交互的新方法。Dragology 实现了模型驱动的拖拽。为了提供更强的表现力和可定制性，D2 是可组合的：简单的模型驱动拖拽行为可以组合起来创建更复杂的行为，修饰符还可以叠加浮动、吸附和过渡等功能。更多详情，请参阅论文。

Dragology demos We implemented D2 in a library called Dragology, built for SVG interfaces on the web. algebra twisted trees bézier curve braid card piles face trominoes sprouting tree See our demo gallery for many more interactives built with Dragology.

Dragology 演示：我们将 D2 实现为一个名为 Dragology 的库，专为 Web 上的 SVG 界面构建。代数、扭曲树、贝塞尔曲线、辫子、卡片堆、人脸、三格骨牌、发芽树。请查看我们的演示库，了解更多使用 Dragology 构建的交互式内容。

Where it came from Back in 2022, I had a prototype of a game aimed at making math more tangible, a long-running obsession of mine. It had a lot going for it, but the fundamental mechanic, based on selecting transformations from a menu, lacked the juicy tactility I craved. I eventually came up with a primitive version of what would become model-driven dragging, but implementing it seemed daunting, so it sat on my whiteboard for the next two years, haunting me every time I went to make a sandwich. — Andrew

起源：早在 2022 年，我有一个游戏原型，旨在让数学变得更具体，这是我长期以来的执念。它有很多优点，但其核心机制——基于从菜单中选择变换——缺乏我所渴望的那种生动的触感。我最终构思出了后来演变为模型驱动拖拽的原始版本，但实现它看起来令人望而生畏，所以它在我的白板上挂了两年，每次我去准备三明治时，它都萦绕在我的心头。—— Andrew

Andrew’s whiteboard in June 2023, sketching a basic version of model-driven dragging for tree rewriting. On a really nice walk in Seattle back in 2023, Andrew shared his draggy ideas with me. I kept thinking about them over the years, but didn’t do anything about it. And then last year, it all came together. My buddy Elliot was playing with order-preserving maps between trees. I came up with a fun way to draw these structures, but I realized I didn’t just want to draw them – I wanted to reach in and pull them around, and feel out their dynamics (what became the twisted trees demo above). That felt pretty tough, until I remembered Andrew’s ideas. I got working on a library that, with Andrew’s help, grew into declarative dragging. — Josh

2023 年 6 月 Andrew 的白板，上面勾勒了用于树重写的模型驱动拖拽的基本版本。2023 年在西雅图的一次散步中，Andrew 与我分享了他的拖拽想法。多年来我一直思考这些想法，但没有采取行动。直到去年，一切水到渠成。我的朋友 Elliot 当时正在研究树之间的保序映射。我想出了一种绘制这些结构的有趣方法，但我意识到我不仅想画它们，还想伸手去拉动它们，感受它们的动态（这成为了上面的扭曲树演示）。这看起来很难，直到我想起了 Andrew 的想法。我开始着手开发一个库，在 Andrew 的帮助下，它发展成了声明式拖拽。—— Josh

Our walk in Seattle in 2023, and Josh’s later drawings of order-preserving maps between trees. Since the paper Josh has been working on a variety of new, more intricate mathematical explorables. We’ve found Dragology particularly suited to interfaces that combine parallel representations, where you see the same system from different perspectives. In the permutation lab below, interacting with any one representation fluidly updates the others, even halfway through a drag, showing their relationships in real time.

2023 年我们在西雅图的散步，以及后来 Josh 绘制的树之间保序映射的草图。自论文发表以来，Josh 一直在研究各种新的、更复杂的数学探索工具。我们发现 Dragology 特别适合结合并行表示的界面，在这种界面中，你可以从不同角度观察同一个系统。在下方的排列实验室中，与任何一种表示的交互都会流畅地更新其他表示，即使在拖拽过程中也是如此，从而实时展示它们之间的关系。

Parallel representations for permutations, updating in tandem. Permutation lab Andrew has been working to bring declarative dragging to existing applications, including his research on user interfaces for programming languages, as well as restarting work on the math game concept that kicked it all off. Hazel is an academic programming environment where every edit keeps your code meaningful. Using declarative dragging, refactorings become tangible and discoverable. Not long after submitting the paper, Andrew began working on his math game again, adapting declarative dragging to the gamepad and moving off the 2D canvas into a 3D world.

排列的并行表示，同步更新。排列实验室。Andrew 一直致力于将声明式拖拽引入现有应用程序，包括他对编程语言用户界面的研究，以及重启最初那个数学游戏概念的开发。Hazel 是一个学术编程环境，其中的每一次编辑都能保持代码的意义。使用声明式拖拽，重构变得具体且易于发现。在提交论文后不久，Andrew 又开始了他的数学游戏开发，将声明式拖拽适配到游戏手柄，并从 2D 画布转向了 3D 世界。

Cite @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} }

引用 @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} }