Declarative Dragging
316 points by smusamashah 5 days ago | 37 comments

gavinray 3 hours ago
Funny story about drag-and-drop:

At my very first job, we had a weekly meeting to assign tickets and estimates.

Our non-technical PM wrote "drag-and-drop" on a whiteboard, and then my name.

"Gavin, how long do you think this will take?"

"All week. At least. Maybe longer?"

PM laughed, then realized I wasn't making a joke.

"What do you mean 'all week'? That's ridiculous, do I need to give this to someone else?"

"Well, you could, but I wouldn't count on you getting it any sooner."

Appalled, he exclaims: "It's just drag-and-drop!"

After 10-15 minutes of a room full of engineers trying to explain the difficulty, he gave up with an unhappy "Fine."

The phrase "it's just drag-and-drop" became an inside joke for the rest of my time there...

reply
freecodeio 3 hours ago
I think non-tech people think that drag and drop is some sort of emergent property because you're pressing the mouse and holding it pressed.
reply
adastra22 2 hours ago
Dumb question: why? It’s been a long time since I touched GUI code, but I thought it gave you a message with the URI to the file. How is this significantly different than file-open?
reply
gavinray 48 minutes ago
This was circa 2010 or so, and it was a web app. So pre-ES6 JavaScript, before React.

Nowadays you would just "npm install drag-and-drop" but back then you often had to hand-roll solutions.

If anyone can dig up an ancient library on GitHub for drag-and-drop back in those days, I'd imagine it would be several thousand lines long, not to mention the absolute nightmare that testing something like this with a proper framework and accompanying testing library.

reply
adastra22 14 minutes ago
Ah, I was thinking desktop applications.
reply
anonymous908213 14 minutes ago
Hit-test where the mouse-down event is fired, hit-test where the mouse-up event is fired. What the hell do you need a library for?

> If anyone can dig up an ancient library on GitHub for drag-and-drop back in those days, I'd imagine it would be several thousand lines long,

I bet, the JS devs who do write code overcompensate for the ones who can only stitch together libraries, and love overcomplicating and obfuscating simple concepts. Spaghetti artist might be a more accurate job title than web developer.

reply
mcculley 2 hours ago
There are more possible actions than opening files.
reply
giwook 50 minutes ago
I love when non-technical people think they know better than the technical people about technical things...
reply
timcobb 3 hours ago
good thing you had backup. rough hahaha.
reply
btown 4 hours ago
Oh, this is very, very cool, and very, very timely!

Paper here: https://declarative-dragging.github.io/D2.pdf

IMO one of the remaining gaps of agentic coding is that it's hard for even multimodal LLMs to check interactive motion effects for correctness and "feel." Like, sure, they can take screenshots of a few snapshotted states, but in terms of how things react as underlying nodes move and (potentially) reflow. How do you QA the feel of moving your wrist rapidly in the context of nested zones?

The answer is that you avoid the need to: you have a (nearly-provably) correct foundation that ensures that behavior is predictable regardless of state, and just render accordingly.

The paper's approach is incredible here: simultaneous optimistic rendering of multiple possible states, and a composable algebra (a small combinator language) over how drop zones and distance are derived - allowing for an extremely high-level interface in practice. Everything feels snappy and right, and the code you write is about as minimal as you can get - though the paper notes that state management is somewhat complex. But this seems solvable!

Once this is ported to HTML, it'll become an incredible part of the modern dev toolkit. I'm very excited for what this means.

reply
disconcision 4 hours ago
i have a basic html version working with solid, using basically the FLIP technique to get the measurements. dunno in what form we might try to release it though, its a bit awkward to generalize over existing frameworks
reply
codedokode 13 minutes ago
Interesting idea, but look too complicated for me. What if there are 1000 places where an element can be dropped? What if we select and drag several elements at a time?

Also this approach seems to introduce new complicated concepts like "composables" and even a DSL. Probably writing custom code for Drag-and-drop would be easier that figuring out how this works. I read the page and did not understand much. For example, this phrase is difficult to understand: "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.". Not "simply" at all. Writing new code would be easier especially with LLM.

reply
sourdecor 3 hours ago
I think this is a really cool project, but I also really appreciate the introduction to Hazel[0].

[0]: https://hazel.org/

reply
jauntywundrkind 2 hours ago
Hazel is such a god tier system, all the respect. Taking programming and making representing things in this live system good is such a huge bridge to a better programming, programming that welcomes the world in.

In huge "Stop Drawing Dead Fish" / "Stop Writing Dead Programs" ways. Which I'm such a fan of. Asked Astra to chase down references on this a couple weeks ago, quite enjoyed the result. https://news.ycombinator.com/item?id=5634662 https://news.ycombinator.com/item?id=33251799 https://news.ycombinator.com/item?id=33270235 https://chatgpt.com/share/6aea25b4-e294-83e9-b925-431bb13b00...

Thanks for the mention. I ran across Declarative Drawing & I really want excuses to use this. But I don't remember Hazel from the video I watched in it!

reply
gobdovan 3 hours ago
Appreciable, but what is the novelty exactly? The API design? I see the paper doesn't call out Sketchpad or any of Ivan Sutherland's work anywhere in the paper, neither ThingLab or Juno(-2). They do call out Apparatus, which already introduced speculative rendering. The work also doesn't seem to generate valid transforms, which you have to supply yourself. Discovering valid transforms or solving a more general inverse rendering problem would have been much cooler research.
reply
amelius 4 hours ago
Does this also work when the search space becomes large?

I fear this might lead to an exponential blowup.

(The examples shown are all tiny)

reply
jnpnj 2 hours ago
I didn't read the paper yet, but do you they do space partitioning based on events direction ?
reply
kkotak 5 hours ago
Nice work! Good to see that someone is still working on making the Human Computer interface that has been around for while and used extensively in many applications more human. Thank you.
reply
fitsumbelay 24 minutes ago
all links and buttons in document header are also draggable demonstrations of the concept. very cool
reply
disconcision 4 hours ago
an author here (andrew). down to answer questions though it might be a bit until i get to them
reply
rao-v 3 hours ago
Someone else asked something similiar but basically, how does / should this work when candidate drop targets are many e.g. when dragging a first or second rectangle onto a page in Figma when no relationships have obviously been set.
reply
sebmellen 4 hours ago
All I have to say is thank you for doing this! This is truly super cool. It’s a rare kind of gem to see thoughtful work like this in our new AI era.
reply
michalsustr 3 hours ago
Very cool demo! One idea I had in the back of my mind is extending grammar of graphics for interactive visualisations. What you did might be a good way how to approach this! Did you think about doing something like this btw.?
reply
terabytest 4 hours ago
Out of curiosity, does your library support physical springs for animation between states? That’d be a great touch.
reply
O_H_E 3 hours ago
Anyone have an idea of what stack/technique would be used to accomplish a task that this is widely superior for. The work seems cool but I'm having trouble imagining what is it replacing.

Edit: nvm, answered by the Background section of the paper

reply
cootsnuck 3 hours ago
Very neat, looking forward to playing around with this. We are sorely in need of of more exploration into UX/UI, HCI of the current era of digital tools.
reply
leecommamichael 4 hours ago
Speculative rendering sounds awfully expensive.
reply
pyrolistical 3 hours ago
It’s just rendering? I don’t see why it would be more expensive
reply
jy14898 3 hours ago
reply
meindnoch 2 hours ago
Precisely what came to my mind.
reply
gitgud 4 hours ago
Wow that is an elegant way to do it. This could create a renaissance of drag n drop interactions for the web
reply
gandreani 5 hours ago
This is revolutionary! I wonder if there's any similar prior art.

The Hazel programming env is dope. I can already imagine using it to explain refactorings to new programmers.

The twisted tree diagrams is also really neat. Is that a new idea as well? I got the beginnings of an idea where it might be a good diagram to display tangled code paths.

reply
Darky 6 hours ago
Fantastic work! The interactive demos are incredibly satisfying to play with, visually delightful, and genuinely educational.
reply
petters 6 hours ago
Agreed. It’s really good!!
reply
hermannj314 5 hours ago
It is nice to read a coding article.

Very nice work

reply
dogscatstrees 3 hours ago
Drag-and-drop is a user interface feature. More often we need drag tools for DAG (Directed Acyclic Graph), which is an execution architecture. Most work involves dependencies: something must happen before something else can happen. I didn't see DAG here.
reply
diligly 3 hours ago
Good work
reply