Declarative Dragging (declarative-dragging.github.io)
667 points by smusamashah 5 days ago
gavinray 18 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...
rajnathani 13 minutes ago
It’s funny that you write this, as when I was at Salesforce, I picked up a nested list drag-and-drop task solo except-testing (as the “go to” UI person on the team), and it took me almost the entire release quarter to complete it. While it turned out good (and I remember the feature’s implementation getting praise by a senior manager at a sub-org demo meeting), that I was called into a team meeting for a “Root Cause Analysis” (paraphrasing) to discuss why the feature took so long to implement.
freecodeio 17 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.
polarsanel 5 hours ago
Making something easier and more intuitive for a human is more work as always.
nielsbot 6 hours ago
I think the Dragology stuff actually gets to the nub of what makes interactive drag-and-drop challenging: it's speculative live editing of a view into your model data.
ChrisMarshallNY 4 hours ago
One of the more complex early modules that I wrote, was an engine for selecting a crop of an image in a scanner control plugin.
It was crazy complicated.
Simple is not simple.
adastra22 17 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?
gavinray 16 hours 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.
adastra22 15 hours ago
pcthrowaway 9 hours ago
anonymous908213 15 hours ago
sn0wleppard 6 hours ago
Dragging UI items around on a page is very different problem to dragging an external file onto a page
ehnto 14 hours ago
I built a drag and drop content CMS/website builder in native Javascript years ago. The browser APIs are really cumbersome. The other issue is more UX than technical, there are lots of questions to answer. What are you dragging, what is it hovering over actually, what is the intention once it's dropped etc.
hdjrudni 10 hours ago
Drag-and-dropping a file directly on the HTML `<input type="file">` file picker works with no code/JS.
If you want to splash up the "drop here" thing it's a frickin nightmare. The events don't fire when they should (e.g. mouse leave doesn't fire so it gets stuck, or you get duplicate events or missing events) so you get a bunch of flicker unless you do a bunch of debouncing and fail safes to cover all the browser quirkiness. And this is the easy drop-a-file scenario.
Doing all the stuff shown in https://www.youtube.com/watch?v=l7v-UwpsEbk I'm not sure I'd even know where to begin.
mcculley 17 hours ago
There are more possible actions than opening files.
cosmic-dancer 6 hours ago
While it's a wrong assumption, I don't really think it's dumb for a non-technical person to assume this is fast to implement, and I don't think it's some epic own that he offered pushback on this even though he was wrong.
polarsanel 5 hours ago
> do I need to give this to someone else
If said this way he was a jerk. So good on em for making a joke.
"Why would this take so long?" would be better.
My guess like most things "you wanna retrofit audio and data cabling to your house. Find an electrician who can do that in an hour. Yes it is just wires".
cosmic-dancer 5 hours ago
superxpro12 17 minutes ago
everyone at my job knows to never utter the phrase "simple software change" when im within earshot.
giwook 16 hours ago
I love when non-technical people think they know better than the technical people about technical things...
timcobb 17 hours ago
good thing you had backup. rough hahaha.
coffeeenjoyer 7 hours ago
Obligatory clip https://www.youtube.com/watch?v=XpNdGvbwtf0
btown 19 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.
disconcision 18 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
sourdecor 18 hours ago
I think this is a really cool project, but I also really appreciate the introduction to Hazel[0].
[0]: https://hazel.org/
jauntywundrkind 16 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!
tablatom 6 hours ago
Imagine an agentic coding system with a good memory implementation. It's prompted to build an app with sophisticated drag-and-drop features. And then another one... After twenty such apps it realises there must be better way and comes up with declarative dragging.
It's pretty clear to me how far current models are from this being real. I'd say it's a good example of how AGI it not upon us, despite what the big labs are claiming.
Even the remarkable mathematical achievements are in some ways brute-forcing in a limited space. The space of "how could we build this better" is in an entirely different category of scale.
adamddev1 5 hours ago
Exactly. There's a big difference between filling in a function or a proof by searching and brute-forcing across existing lemmas or functions and creating truly novel ideas and solutions.
edflsafoiewq 11 hours ago
The Twisted Trees example is really cool. I would not have been able to implement it that well. After playing with it, I think at the most basic the underlying principle is:
> Write your interface as a function of continuous variables, ui = ui(x1,x2,...) = ui(X). When dragging an element, compute the barycentric coordinates λ₁,λ₂,λ₃ of the cursor between the three nearest dropzones. Then render by interpolating the ui parameters between their values at those three dropzones, ui(λ₁X₁ + λ₂X₂ + λ₃X₃).
gobdovan 17 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.
codedokode 15 hours 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.
nostrebored 14 hours ago
The idea is that you can describe the predicates, producers, and goals. If I’m understanding correctly. This is how a ton of stuff works: excel, your IaC, etc.
Here the goal can be a render state and it is the solvers problem to figure out what should be there.
So you define these things very atomically, but the behavior automagically finds a valid render state (usually through converting things into a standard planner or solver language, haven’t dived into this repo yet)
amelius 18 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)
Groxx an hour ago
fwiw even the tiny "drag a ball through a bunch of rotating bent blocks" lags quite noticeably when I start dragging. so I suspect it struggles even when the space is fairly small.
neat technique though!
pratikdeoghare 9 hours ago
I suspect this might almost never be a problem. Because say there are n things on the canvas and they have occupied n slots, you lift one of them and want to drop it somewhere, there are only n spots to drop it to. This gives only n next states, even though there are n! permuatations. You have to drag and drop again to reach some other state.
pratikdeoghare 9 hours ago
One artificial example that can generate exponential number of states is this.
You have a list of sets and their subsets below them shown on screen. Now you take one element from one of the sets and add it to another set want things updated, this will trigger exponential computation. Since we (human) can't really visually look at all the exponential subsets anyway it will be not a very useful visulalization.
So exponential state space will be a problem only in the cases we don't care about it. Even then we could choose only few of the states by some criteria.
jnpnj 16 hours ago
I didn't read the paper yet, but do you they do space partitioning based on events direction ?
disconcision 19 hours ago
an author here (andrew). down to answer questions though it might be a bit until i get to them
sebmellen 18 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.
rao-v 17 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.
disconcision 13 hours ago
not 100% sure this is what you're asking but for continuous degrees of freedom i.e. numeric model parameters we have the 'vary' operator, which is used in all our canvas-type examples. more in the paper (section 5 under the numerical optimization header). in the trivial case this allows for unconstrained positioning
terabytest 18 hours ago
Out of curiosity, does your library support physical springs for animation between states? That’d be a great touch.
disconcision 14 hours ago
so far the library is history-independent wrt transitions, which is a nice simplification but does preclude more physics-y interactions.
michalsustr 18 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.?
kkotak 19 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.
dwoldrich 12 hours ago
This API feels as significant to me as Reactive Extensions did when Netflix first debuted it. Thank you for this research! I have a lot to think about!
jy14898 17 hours ago
meindnoch 17 hours ago
Precisely what came to my mind.
cootsnuck 18 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.
ramblurr 4 hours ago
Is there any hope this could be turned into a vanilla js library and not attached to a particular SPA framework?
O_H_E 18 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
nostrebored 14 hours ago
We will continue to reinvent dataflow and planning problems until the end of time; you will be surprised how many fundamental pieces of software use this paradigm
gobdovan 12 hours ago
technically all of them since hardware itself is basically a dataflow system
leecommamichael 18 hours ago
Speculative rendering sounds awfully expensive.
pyrolistical 17 hours ago
It’s just rendering? I don’t see why it would be more expensive
leecommamichael 13 hours ago
Rendering in this context means producing an element tree, or a textual description of one, which is capable of firing off many little (slow) allocations. The implication being that this will not scale to a large number of nodes without slogging the machine unduly.
chii 10 hours ago
wpmaven 2 hours ago
This is so cool!
fitsumbelay 15 hours ago
all links and buttons in document header are also draggable demonstrations of the concept. very cool
Darky 20 hours ago
Fantastic work! The interactive demos are incredibly satisfying to play with, visually delightful, and genuinely educational.
petters 20 hours ago
Agreed. It’s really good!!
gandreani 19 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.
gitgud 19 hours ago
Wow that is an elegant way to do it. This could create a renaissance of drag n drop interactions for the web
hermannj314 19 hours ago
It is nice to read a coding article.
Very nice work
totetsu 10 hours ago
diligly 17 hours ago
Good work
dogscatstrees 18 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.