宣言的なドラッグ＆ドロップ

Declarative Dragging

★ Best Paper Award, UIST 2026

paper video demos explorable supplement

図をドラッグ可能にするのが、それが何になりうるかを指定するのと同じくらい簡単だったらどうなるでしょうか？

ドラッグ＆ドロップはデジタルなものを掴めるようにします。しかし、カスタムのドラッグインタラクションを設計するには、ジオメトリ、フィードバック、アニメーションを処理するための多くの細かいコードが必要です。その結果、教育者からゲームデザイナー、数学者からクリエイティブツール開発者まで、多くの人々が手間を惜しんでしまいます。

宣言的なドラッグ＆ドロップは問題を逆転させます。その視覚的な動作を直接プログラミングするのではなく、ドラッグ可能にしたい各要素について、ドラッグがどのようなアプリケーションの将来の状態につながるべきかを単に指定します。私たちのシステムは、それらの状態を推測的にレンダリングして、どこに配置できるかを把握し、これらの可能な世界をスムーズで応答性の高いドラッグ＆ドロップインタラクションに統合します。

このプロジェクトの目標は、人々が慣れ親しんだ意味論的な世界で作業を続けられるようにすることです。同時に、彼らの世界のルールを、私たちの世界における豊かで触覚的なインタラクションに変える手助けをします。

［画像: Title card: Declarative Dragging, with illustrations labelled Model-Driven and Composable.］

宣言的なドラッグ＆ドロップを紹介する5分間のビデオ。

仕組み

D2はモデル駆動型です。インターフェイスの著者は、ドラッグすることでアクセス可能になる将来のモデル状態を指定することによって、要素をドラッグ可能にします。エンジンはこれらの状態をビューツリーに推測的にレンダリングし、これらのレンダリングにおけるドラッグされた要素の位置を抽出し、それらを使用してドラッグ＆ドロップインタラクションを合成します。これらはすべて、インターフェイスの著者が詳細な作業を行う必要なしに実現されます。

[［画像: Diagram: a model state is rendered to a view; when a drag starts, possible target states are rendered speculatively, and where the dragged element lands in each becomes a drop zone for an animated drag.］]

Dragologyは、「宣言的なドラッグ＆ドロップ」を実装したライブラリです。これは、インターフェイス開発者がより少ない労力で高品質なドラッグ＆ドロップインタラクションを作成するための新しい方法です。Dragologyはモデル駆動型ドラッグ＆ドロップを可能にします。

より広い表現範囲とカスタマイズ性を提供するために、D2はコンポーザブルです。単純なモデル駆動型ドラッグ＆ドロップの動作を組み合わせて、より複雑な動作を作成でき、モディファイアはフローティング、スナップ、トランジションなどの機能をレイヤー化できます。詳細については、論文を参照してください。

Dragologyデモ

私たちはD2をDragologyというライブラリに実装しました。これはWeb上のSVGインターフェイス用に構築されています。

［動画］algebra ［動画］twisted trees ［動画］bézier curve ［動画］braid ［動画］card piles ［動画］face ［動画］trominoes ［動画］sprouting tree

Dragologyで構築された多くのインタラクティブなデモについては、デモギャラリーをご覧ください。

由来

2022年、私は数学をより具体的にするためのゲームのプロトタイプを持っていました。これは私の長年の執念でした。それは多くの点で優れていましたが、メニューから変換を選択することに基づいた基本的なメカニズムには、私が切望していたジューシーな触覚性が欠けていました。最終的に、モデル駆動型ドラッグ＆ドロップになるものの原始的なバージョンを思いつきましたが、実装は daunting に思えたため、次の2年間、サンドイッチを作るたびに私を悩ませながら、ホワイトボードに残っていました。— Andrew

[［画像: A whiteboard titled 'nool' covered in small algebraic expression trees, with arrows showing how each rewrite rule would be dragged, a section labelled CONFLICT, and a row labelled DISAMBIGUATION STAGE listing choice tree, overlap-click, default-drag and split-drag.］]

Andrewのホワイトボード（2023年6月）、ツリー書き換えのためのモデル駆動型ドラッグ＆ドロップの基本的なバージョンをスケッチしています。

2023年、シアトルでの本当に素晴らしい散歩中に、Andrewは彼のドラッグに関するアイデアを私と共有しました。私は何年もそれらについて考え続けましたが、何も行動しませんでした。そして昨年、すべてがまとまりました。私の友人Elliotは、ツリー間の順序保存写像をいじっていました。私はこれらの構造を描く楽しい方法を思いつきましたが、描くだけでなく、手を伸ばしてそれらを動かし、そのダイナミクス（上記のツイストツリーデモになったもの）を感じたいと思いました。それは pretty tough に感じられましたが、Andrewのアイデアを思い出しました。Andrewの助けを得て、宣言的なドラッグ＆ドロップに発展したライブラリに取り組み始めました。— Josh

[［画像: A map of a walk through Capitol Hill in Seattle, its route in orange, with Josh's drawings of order-preserving maps between small trees laid over it: a hand-drawn lattice of trees with strands running between them, a computer-drawn version of the same lattice, and single trees cut from them.］]

2023年のシアトルでの私たちの散歩と、Joshによるツリー間の順序保存写像の後の描画。

論文以降

Joshは、さまざまな新しい、より複雑な数学的な探求可能なものに取り組んでいます。私たちは、Dragologyが、同じシステムを異なる視点から見る並列表現を組み合わせたインターフェイスに特に適していることを見出しました。以下の順列ラボでは、いずれかの表現を操作すると、ドラッグの途中であっても他の表現が流れるように更新され、リアルタイムでそれらの関係を示します。

［動画］

順列の並列表現、タンデムで更新。 Permutation lab

Andrewは、プログラミング言語のユーザーインターフェイスに関する研究を含め、宣言的なドラッグ＆ドロップを既存のアプリケーションに導入することに取り組んでいます。また、すべてを開始した数学ゲームのコンセプトの作業を再開しています。

［動画］

Hazelは、すべての編集がコードを有意義に保つ学術的なプログラミング環境です。宣言的なドラッグ＆ドロップを使用すると、リファクタリングは触覚的で発見可能になります。

［動画］

論文を提出してから間もなく、Andrewは数学ゲームの作業を再開し、宣言的なドラッグ＆ドロップをゲームパッドに適応させ、2Dキャンバスから3D世界へと移行しました。

引用

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