Jump to content
Search Community

Help with Draggable capturing all touch input from Highcharts

demonzmedia test
Moderator Tag

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


First of all, hats off to your great product!


I need some help with Draggable. I am trying to embed 3 charts (using Highcharts) in a div and make that div scrollable using Draggable (and later add momentum using throwprops but haven't come to this stage yet). 


All works great except that Draggable seems to capture all touch events. You will see in the use case below:

 

See the Pen jLwBEV by nayanuka (@nayanuka) on CodePen

 

Here is the same but with Draggable disabled:
 

See the Pen RZgprz by nayanuka (@nayanuka) on CodePen

 


You will see that you can scroll regardless of where you place the finger (but of course now the Draggable magic is missing so I wont be able to add momentum or anything like that to the sliders).


Please let me know if this is a bug with Draggable or if I am simply not setting the right properties and if there are any easy workarounds.
Thank you very much for your time.

 

cheers
Nayanuka

Link to comment
Share on other sites

Hi ,

 

With highcharts.js I'm not familiar.

 

Here a 'hard' version (somewhat bumpy) to achieve the drag function :  

onPress, onDrag, onDragEnd  activates a #dragCover  (z-index , background: red) ...

 

Perhaps one can help with these functions synonymous highcharts.js to pause mouseover etc.  (?).

 

See the Pen RZgLxV by mikeK (@mikeK) on CodePen

 

Best regards

Mikel

 

  • Like 3
Link to comment
Share on other sites

@mikel

 

That's exactly what I was thinking. The reason it doesn't start is the event target becomes blocked when you change the zIndex. I created a fake event object, and passed that into the startDrag method. I don't know if I included all the properties GSAP checks for, and I didn't test it in other browsers, but it's a start.

See the Pen dzRZwj?editors=0010 by osublake (@osublake) on CodePen

 

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