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

[sumimasenga]

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

[GreenSock]

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

[sumimasenga]

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?

[Diaco]

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

[GreenSock]

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. 
});

[sumimasenga]

SUPERB! It works!

ev.originalEvent nailed it!

 

Thanks for your help! Really appreciate it!