[Solved] Touchmove and srolling

[ajeantet]

Hi, I do have an issue on touch devices when I call the draggable-points plugin :

On a touch device, I use a finger in the middle of the screen to scroll up or down. However, when there is a chart (and that de plugin is called - whether I made the chart draggable or not), I can't scroll over the chart. Or to be more accurate, if I'm scrolling I can continue over the chart, but if I stop, have a look at the chart, click on it, and then try to scroll away from it, it doesn't work.

The reason for that is that we have assigned something to the touchmove event : addEvent(container, 'touchmove', mouseMove);

So,

• Can we let the touchmove event "free" for charts without draggable points ?
• For a chart with draggable points, could we assign the touch event only to the columns for example (and not the full container) ?
• Or could we think of an other way to handle the drag/drop events on smartphone (like double clicking, or cliking on the target position) ?

Thank you in advance for your help, Adrien

[sebastianbochan]

Thank you for the reporting.

Please let me know if problem appears also without draggable-points extension? What kind of touch device do you use (platform / OS).

[ajeantet]

It does not happen if draggable-points is not called I tried with Andoid 7.0 and Firefox 53.0, or Chrome 58.

[sebastianbochan]

I tested the demo https://jsfiddle.net/18jp1ste/show/ in two devices:

• iPhone 6s (OSX 10.2.x)
• Android 6

In both cases, when Im tapping on text Im able to scroll up and down, but when I touch on the chart, dragging is triggered. Let me know if we discuss about the same "behaviour".

[ajeantet]

Yes exactly. The dragging is trigger and consequently I can't scroll when I touch the graph

[sebastianbochan]

This is related with events, which are added on whole container: addEvent(container, 'mousemove', mouseMove); addEvent(container, 'touchmove', mouseMove); addEvent(container, 'mousedown', mouseDown); addEvent(container, 'touchstart', mouseDown); addEvent(document, 'mouseup', drop); addEvent(document, 'touchend', drop); addEvent(container, 'mouseleave', drop);

[ajeantet]

Yes its actually due to the addEvent(container, 'touchmove', mouseMove); event. Is there something we can do about it ?

[ajeantet]

I found a workaround :) Replace : function mouseMove(e) { e.preventDefault(); if (dragPoint) {

by : function mouseMove(e) { if (dragPoint) { e.preventDefault();

It's good enough for what I need :) Try with this website (sorry no english version yet) : http://www.electricite-2050.fr/