Jump to content
GreenSock

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

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

Hi!

 

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!!

//Robert

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,
    onDrag:function(){
    $('#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;
    velocity_point_dragger.startDrag(e);
});

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):

http://codepen.io/GreenSock/pen/144401669e9970f0f489890792cb7b15/

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.
×