Declarative Dragging

In the world of digital design, dragging and dropping elements to manipulate interfaces is a common task. However, creating custom drag interactions often requires intricate code to manage geometry, feedback, and animations. This complexity has led many developers, including educators, game designers, mathematicians, and tool creators, to avoid implementing such features.

Declarative dragging offers a simpler solution to this problem. Instead of directly programming the visual behavior of an element when it is dragged, developers can specify the future states in the application that the drag should lead to. Our system works by speculatively rendering these potential states to determine where the dragged element can go, and then combining these possibilities into a smooth, responsive drag-and-drop interaction.

The goal of this project is to enable users to maintain their familiar semantic environments while seamlessly transforming them into rich, tactile interactions. In our approach, known as D2, an interface author can designate an element as draggable by defining which model states should become accessible through dragging. An engine then renders these states in anticipation of the drag, extracts the position of the dragged element in each rendering, and uses this information to generate the drag-and-drop interaction without requiring extensive custom coding.

To enhance the flexibility and customization of D2, it is designed to be composable. This means that simple model-driven drag-and-drop behaviors can be combined to form more complex interactions, and modifiers can be layered to add features such as floating, snapping, and transitions.

For further information, refer to the associated paper. We have implemented D2 in a library called Dragology, specifically designed for interactive SVG interfaces on the web. Our demo gallery showcases numerous interactive applications built using Dragology.

The inspiration for declarative dragging came from a personal project aimed at making mathematics more tangible. Initially, I struggled to create a compelling drag mechanic for a game aimed at teaching math concepts. After years of contemplation and inspiration from a walk in Seattle, the idea finally materialized. My friend Elliot was exploring order-preserving maps between trees, and I envisioned a way to interact with these structures.

With Andrew's assistance, we developed Dragology, a library that brings declarative dragging to life.

This innovative approach has been instrumental in creating more intricate mathematical explorables. Dragology is particularly effective for interfaces that combine multiple representations of the same system, allowing users to interact with these representations seamlessly, even during the drag operation. This real-time synchronization of parallel representations enriches the user experience and provides deeper insights into the underlying mathematical relationships.