Drag scrolling of tasks pane

Gantt
#1

Is it possible to make tasks pane to scroll on mouse drag?

#2

Hi,
unfortunately there is no built-in solution. You may try trace mouse events manually and perform scrolling when dragged task reaches the end of the visible timeline area, or you may try third-party plugins for autoscroll (however, none of such plugins hasn’t been tested for compatibility with the component)

#3

I use a couple of jQuery plugins to achieve this and it works great.

The first is dragscrollable.js (not sure where I found this, but just do a search). The second is jquery.mousewheel.js (github.com/brandonaaron/jquery-mousewheel).

Once you’ve loaded these, just add the following after you’ve initialised the gantt chart:

$(document).ready(function () {
	$('div.gantt_task').dragscrollable();
	$('div.gantt_task').mousewheel(function(event, delta) {
		this.scrollLeft -= (delta * 100);
	});
});

This allows you to click-and-drag the chart left and right or use the mouse wheel.

#4

@Matt

I tried just implementing the dragscrollable as I wanted only the dragscroll. Somehow that didn’t work as intended.

$('div.gantt_task').dragscrollable();

Played around a bit and but the below works (but vertical scrolling only)

$('div.gantt_data_area').dragscrollable({ acceptPropagatedEvent: true})

Any thoughts?

#5

Hi,
due to design of the scrolls, gantt listens different elements for vertical and horizontal scroll
The “div.gantt_data_area” (DOM reference - gantt.$task_data) is responsible for vertical drag,
and “div.gantt_task” (DOM ref - gantt.$task) goes for horizontal drag.

So if you want to invoke a horizontal scroll, you should work with ‘.gantt_task’ element.
There is also API method for scrolling, if it helps somehow
docs.dhtmlx.com/gantt/api__gantt_scrollto.html

#6

but when it scrolls with mouse scroll, the dates dosn’t appear… is there any solution? :frowning:

#7

Found this on the web and modified… does the job of horiz scrolling and takes into account tasks, drag handles, and link points. ref: https://github.com/phuoc-ng/html-dom/blob/master/demo/drag-to-scroll/index.html

const ele = document.getElementsByClassName('gantt_task')[0];
ele.style.cursor = 'grab';

let pos = { top: 0, left: 0, x: 0, y: 0 };

const mouseDownHandler = function(e) {

var $el = $($(e.target)[0]);
if ($el.hasClass("gantt_task_content") || $el.hasClass("gantt_task_drag") || $el.hasClass("gantt_link_point")) return;

    ele.style.cursor = 'grabbing';
    ele.style.userSelect = 'none';

    pos = {
        left: ele.scrollLeft,
        top: ele.scrollTop,
        // Get the current mouse position
        x: e.clientX,
        y: e.clientY,
    };

    document.addEventListener('mousemove', mouseMoveHandler);
    document.addEventListener('mouseup', mouseUpHandler);

};

const mouseMoveHandler = function(e) {
    // How far the mouse has been moved
    const dx = e.clientX - pos.x;
    const dy = e.clientY - pos.y;

    // Scroll the element
    gantt.scrollTo(pos.left - dx, null)

};

const mouseUpHandler = function() {
    ele.style.cursor = 'grab';
    ele.style.removeProperty('user-select');

    document.removeEventListener('mousemove', mouseMoveHandler);
    document.removeEventListener('mouseup', mouseUpHandler);
};

// Attach the handler
ele.addEventListener('mousedown', mouseDownHandler);
#8

Hello TaliSeen,
Starting from the 6.3 version, you can add the Drag Timeline extension and drag the timeline:
https://docs.dhtmlx.com/gantt/whatsnew.html#63
https://docs.dhtmlx.com/gantt/api__gantt_drag_timeline_config.html
Here is the sample:
https://docs.dhtmlx.com/gantt/samples/02_extensions/27_drag_timeline.html

1 Like