Jump to content
GreenSock

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

Help with Draggable capturing all touch input from Highcharts

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

Hi @OSUblake,

 

That´s a real fake - not a fake news. Great ...

 

Best regards

Mikel

  • Like 2
Link to comment
Share on other sites

uh-oh... @mikel is starting to think on the same wavelength as @OSUblake. This could be trouble. I'll go ahead and post this picture again as I think it's apropos to what's happening.

 

r0RjYUz.jpg

  • Like 5
Link to comment
Share on other sites

Thanks guys... I think now I have some options to fix my issue. Will report back how it goes.

Regards

Nayanuka

  • Like 1
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.
×