Click and drag to scroll

[ecke101]

I want to be able to click and drag to scroll horizontally. I tried to add a listener with some code I found but it's not firing. Any suggestions?

This is the code I tried:

var slider = g.getChartBody();
let isDown = false;
let startX;
let scrollLeft;

slider.addEventListener('mousedown', (e) => {
    isDown = true;
    startX = e.pageX - slider.offsetLeft;
    scrollLeft = slider.scrollLeft;
});
slider.addEventListener('mouseleave', () => {
    isDown = false;
});
slider.addEventListener('mouseup', () => {
    isDown = false;
});
slider.addEventListener('mousemove', (e) => {
    if(!isDown) return;
    e.preventDefault();
    const x = e.pageX - slider.offsetLeft;
    const walk = (x - startX) * 3; //scroll-fast
    slider.scrollLeft = scrollLeft - walk;
});

[nidu]

Working for me. Dragging is not right, but it works. Do you have any errors in the console? While testing on the demo page i found that getChartBody may be null on first pass if you don't have any tasks yet, so i put this code into afterDraw and wrapped all addEventListener into if (slider) {... block

[ecke101]

Thank you! That did it. It scrolled fast at first but I noticed there was a "* 3" in the code so changing it to *1 made the scrolling work like I want it to. Great!
For anyone interested in implementing this, this is my final code that has both vertical and horizontal scrolling:

g.setOptions({
    vEvents: {
        afterDraw: () => {
            var slider = g.getChartBody();
            let isDown = false;
            let startX;
            let startY;
            let scrollLeft;
    
            if (slider) {
                slider.addEventListener('mousedown', (e) => {
                    isDown = true;
                    event.preventDefault();
                    startX = e.pageX - slider.offsetLeft;
                    startY = e.pageY;
                    scrollLeft = slider.scrollLeft;
                });
                slider.addEventListener('mouseleave', () => {
                    isDown = false;
                });
                slider.addEventListener('mouseup', () => {
                    isDown = false;
                });
                slider.addEventListener('mousemove', (e) => {
                    if(!isDown) return;
                    e.preventDefault();
                    const x = e.pageX - slider.offsetLeft;
                    const walkX = (x - startX) * 1; //change scroll-speed here
                    slider.scrollLeft = scrollLeft - walkX;
                    window.scrollTo(0, window.scrollY + (startY - e.pageY));
                });
            }
        }
    }
});

[mariohmol]

Awesome!
Could u provide a PR?