Jump to content
Search Community

Draggable on touch screen with multiple touches

Antdev test
Moderator Tag

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

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

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

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

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.
×
×
  • Create New...