Drag with physics



I’m 99% sure I’ve seen this here somewhere before but I can’t find it.

Here’s a very simple implementation of a dynamic panel drag with momentum and drag. The one weird thing now is it doesn’t reset if you change directions while dragging so you’ll see some counterintuitive behavior if you do that.

It’s kind of fun to play with and I think reasonably mimics some of the physics-enabled drag behavior seen in some mobile OSes and apps.

See the example

Vertical Slider and Horizontal Slider in Mobile Prototype

nice! did you not include rp on purpose?


Nice and fluid. Not that it matters, but since you mention it I posted something like that here:

What does the variable DragX represent?

You can adjust the number in the momentum field to affect how fast the object will slow after you let it go.



Oops I did forget the RP! I’ll post it later today.

Nice, Jeff, that might have been what I saw.


File attached for those interested.
dragPhysics.rp (82.4 KB)


This is awesome, but there’s a much easier way to do this.

[li]OnDrag move with drag [/li][li]On dragStop move by X: DragX / 2 * 20 | Y: DragY / 2 * 20 (the /2 is just attenuating the impact the drag speed has. Think of it as gravity)[/li][/ol]

DragX and DragY are already the X and Y velocity of the mouse, so just use that off the bat!

This also eliminates the strange behavior you noticed.

Untitled Document
simpleDrag.rp (68.6 KB)


Very cool, Matei, that is simpler overall. The reason I went with the approach I did is when you use it with a touch device you can “fling” it and “catch” it again mid flight, arresting its momentum. I originally did this to mimic mobile OS-like scrolling behavior. Though this is only apparent right now if you move the mouse again after “catching” it, some tweaking to be done there.

But I think I could probably simplify it as you mentioned.

Move without boundries

Ahh ok, that makes sense. I didn’t realize that about the catch. Mine doesn’t account for that :frowning:


Yeah the thing I’m currently not wrapping my head around is how to best break up the post-release movement into quantized chunks and how much it should move for each so the check if the user has grabbed it again can be run at each step. I’m sure it’s pretty simple but I’m not seeing it yet.


I think that the only way to do it currently would be to have a loop that on drag drop moves a helper by 0,0 which onmove will move the main item by a small pixel amount, then moves itself by 0,0. pair that with a global variable as a loop checker to restrict it from moving infinitely, and you can check for grabs in that helper.

Easing would be a pain, but i think still manageable if you store the dragX on drag drop in a global and use it as a modifier for the small pixel amount mentioned above, subtracting a small amount each time the loop runs, giving it the impression that it’s slowing down.


That’s pretty much exactly how my file works, though it’s built in 6.5 (and I was a couple of years less adept) so the loop implementation may have been less elegant. The helpers are two panels in the upper left. Instead of subtracting a set amount each time, the value in the momentum field is the multiplier for the previous step’s movement.


unlisted #12

closed #13