Jump to content


Trigger Draggable by third party device

Go to solution Solved by MSD,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi there,


I'm trying to create a web app which let's the user move a square around inside a container on his smartphone / tablet and be able to move a square on his desktop. This is, at the current state, accomplished by saving the interaction to a databse via ajax (from the device) and reading for pending actions from the database on the desktop site. Moving elements via arrow works just fine, because the steps are fixed.


I'm just wondering if it would be possible to trigger more advanced things like Draggable with ThrowPopsPlugin. If I'm understanding the docs right, I'm able to trigger Draggable by hand via the startDrag() function but I have to pass the original event. This would be not possible since I'm not able to pass the event from the third party device to the db and further on to the desktop site.


Is there a way to "simulate" such an event on the desktop site, fill it with the neccessary data (pageX, pageY, etc.) and trigger it?


Your help is much appreciated. Thanks in advance!


Kind regards,


Link to comment
Share on other sites

  • Solution

Ah I found the perfect solution:


On the client side I captured the velocity of x and y and saved this to the db.

On the serverside I use ThrowPropsPlugin.to() to create the exact same animation.


Hope this helps someone.


----- EDIT -----


Just some further remarks as I have been fiddling around with this for a couple of more hours:


The solution described above worked as expected with one little issue:


On the client side the square was inside a div which marked the boundary for the Draggable instance.

As far as I know you can't apply these boundaries to the ThrowPropsPlugin.to() method so you have to do a little math.


  1. Calculate the top and left offset of the boundary div on the serverside
  2. Calculate width and height of the boundary div on the serverside
  3. Apply these values to the min/max options of x and y values in the ThrowPropsPlugin.to() method on the serverside
  4. The velocity calculated on the client side (on DragEnd callback) creates a more "forcefully" animation if directly applied on the serverside. I think it has something to do with the Draggable boundary implementation but I can't find much information  on this. What I did was setting the resistance until it felt right.



  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.