Jump to content
GreenSock

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

Draggable on touch screen with multiple touches

Go to solution Solved by Cassie,

Recommended Posts

I am creating an app to be used at an exhibition on a touch screen PC and using gsap Draggable. All was working fine on my desktop PC  (Windows 10 | Chrome) with mouse and normal monitor. This app will allow multiple users - each dragging different elements.

 

However when I hooked up a touch screen monitor I have discovered if I touch the draggable element with 2 fingers - it behaves erratically (jumps around)  which is not going to be acceptable so I need to work out my options.

 

Do I remove gsap Draggable and try another library such as HammerJS or InteractJS in the hope they will place nicely with multitouch.

 

Or is there a code solution where I can prevent this multitouch issue and just ensure it works fine no matter how many fingers touch the draggable element but only act on one of these fingers (hope that makes sense)

 

I don't think a hardware solution is on the cards.

 

Thanks

 

Ant

 

p.s I have not included a codepen as assume peeps won't have a PC touch screen to test on. I am pretty sure the same issue happens with the Draggable demos

Link to comment
Share on other sites

Hey there!

 

This thread may be useful - 
 

 

or this one?
 

 

Link to comment
Share on other sites

Hey Cassie, you have come to my rescue again - thank you. I will give this a go and report back shortly.

 

 

  • Like 1
Link to comment
Share on other sites

Sorry I can't help any more than this - I'm not super hot on the ins and outs of Draggable. 

If it doesn't help, Blake will be around later on today. :) 

  • Like 1
Link to comment
Share on other sites

No problem at all. I am impressed enough that you are responding on a Saturday morning. I am glad I am not the only one working on Saturday :)

  • Like 1
Link to comment
Share on other sites

Posted (edited)

Update to say I tried the solutions suggested in the threads you kindly shared. Unfortunately these suggestions did not resolve the issues.

 

I did test the gsap Draggable demo (

See the Pen ALgdjV?editors=1010 by GreenSock (@GreenSock) on CodePen

) on my touch screen monitor and experienced the same issue. 

Just to clarify, on the Throw demo, to replicate the issue, simply place one finger on the left hand side of the draggable and another finger on the right hand side - the draggable jumps from left to right probably from one finger to the next and back again etc.

I will give Interact JS a go as I do ultimately need to add rotation and possibly some pinching to scale the modals too so I think I would struggle with gsap for this though I could consider just adding buttons to my modals that the user presses to rotate 90 degrees at a time or to scale up and down between 2 values but I would need to crack this issue with the draggable jumping between the two fingers and then just flying off.

 

Just in case it is helpful, my draggable code is as follows:
 

 Draggable.create(".modal', {              
              type:"x,y",
              edgeResistance:0.7,
              inertia: true
            });

 

Edited by Antdev
added more info
Link to comment
Share on other sites


Yeah, I think if you need serious gesture support then hammer.js or something mixed with GSAP is probably a good plan!

Link to comment
Share on other sites

  • Solution

Just checking, because that demo you posted has a lot going on. This isn't working for you?

https://cdpn.io/pen/debug/vYpMbgv <--- debug link for testing

 

  • Thanks 1
Link to comment
Share on other sites

Hey Cassie that link you just posted appears to be behaving! I even added a few more draggbles into the mix and still behaving. Oh fab, that means I could at least use a gsap only solution if the client is happy with rotation and scale via a button.  Thank you so much Cassie.

  • Like 1
Link to comment
Share on other sites

Ah excellent! Glad we got there!
 


For anyone else dropping by - it's the solution from this thread

  • Like 1
Link to comment
Share on other sites

2 hours ago, Cassie said:


Yeah, I think if you need serious gesture support then hammer.js or something mixed with GSAP is probably a good plan!

 

It would be awesome if you could add multi-touch functionality to Draggable to prevent the need to use Interact JS or Hammer JS - appreciate this is a big ask and the target audience for touch screen apps may not be big enough to justify the development time - however I was always told if you don't ask, you don't get so I am asking :)

Link to comment
Share on other sites

Just in case it is useful to anyone else, I have managed to get gsap and InteractJS playing nicely together to enable rotating and dragging with gsap taking care of the setting the properties. 

 

  interact(modal)
            .gesturable({
              listeners: {
                start (event) {
                  angleScale.angle -= event.angle
                },
                move (event) {
                  let currentAngle = event.angle + angleScale.angle;
                  let currentScale = event.scale * angleScale.scale;

                  gsap.set(event.target, {rotation:currentAngle});

                  gsap.set(event.target, {x:'+=' + event.dx});
                  gsap.set(event.target, {y:'+=' + event.dy});
                },
                end (event) {
                  angleScale.angle = angleScale.angle + event.angle
                  angleScale.scale = angleScale.scale * event.scale
                }
              }
            });

 

  • Like 1
Link to comment
Share on other sites

  • 4 weeks later...

Just to update, InteractJS didn't turn out to be a good solution for the multitouch - there is a known issue where a finger on the screen breaks all other interactions. So I have aborted using that.

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