Help with Draggable capturing all touch input from Highcharts

[demonzmedia 1 Likes (Newbie)]

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

[mikel 1,823 Likes (Superhero)]

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

 

[OSUblake 9,990 Likes (Superhero)]

@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

 

[mikel 1,823 Likes (Superhero)]

Hi @OSUblake,

 

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

 

Best regards

Mikel

[PointC 8,599 Likes (Superhero)]

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.

 

[demonzmedia 1 Likes (Newbie)]

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

Regards

Nayanuka