Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Draggable. Custom startDrag(). Cant get it work for touch devices

Go to solution Solved by Diaco,

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



I am building a global velocity tracker that runs as soon as you move your mouse or touch. Im using the Draggable plugin where I call the startDrag method in a mousemove touchmove jquery callback and passing the corresponding event to the startDrag method. Everything is working fine on a computer but when using a touch device it doesnt work. Like if the startDrag never is called. Can you see if I have missed something...


I have tested with ipad air 2, ipad air mini, iphone 4s all with ios 8.1 and its not working.


Check out the codepen.


Thanks for this great library!!


See the Pen wBJrLp by anon (@anon) on CodePen

Link to comment
Share on other sites

Isn't it because you're disabling the "touchmove" events? (the first 2 lines of your codepen)

Link to comment
Share on other sites

Nope it didnt work. I have that code for disabling the built in scrollers. I have forked a new one with much less code. As you can see it works for computers but not for ipads and iphones.


See the Pen EaWozL by anon (@anon) on CodePen


Can you reproduce this?

Link to comment
Share on other sites

  • Solution

Hi sumimasenga  :)


try this :

var velocity_point = $('#velocity_point');
Draggable.create(velocity_point, {type:'x y', throwProps:true,
    $('#debug').html('Velocity: ' + ThrowPropsPlugin.getVelocity(velocity_point_dragger.target, 'x'));

var velocity_point_dragger = Draggable.get(velocity_point);

$(this).on("touchmove mousemove", function(ev) {
    var e = ev.originalEvent;

See the Pen vExdBq by MAW (@MAW) on CodePen

Link to comment
Share on other sites

I think this would be cleaner (no need to use Draggable at all):


var point = {x:0, y:0}; //proxy object
ThrowPropsPlugin.track(point, "x,y");

// Bind touchmove, mousemove
$(this).bind('touchmove mousemove', function(e){
      point.x = e.pageX;
      point.y = e.pageY;
      $('#debug').html('Velocity: ' + ThrowPropsPlugin.getVelocity(point, "x"));
      //technically this will always be one tick behind, but it shouldn't matter much. 
  • Like 1
Link to comment
Share on other sites

SUPERB! It works!

ev.originalEvent nailed it!


Thanks for your help! Really appreciate it! :)

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.