Dragging Tasks within the Timeline

Dragging allows users to quickly change the start (end) dates of the tasks, their duration.
By default, the drag-and-drop is enabled and the user can drag a task along its row in the timeline.

To customize the drag-and-drop behavior, use the following events:

onBeforeTaskDrag - to deny dragging of specific tasks
onTaskDrag - to limit the area for dragging or to provide some other logic when the user drags a task
onAfterTaskDrag - to postprocess tasks after they have been dragged to a new place

Let's consider typical cases when the default drag behavior needs customization:

Denying dragging specific tasks.
Denying dragging tasks out of specific dates.
Dragging children together with the parent.
Dragging projects with subtasks.
Setting minimal task duration.
Autoscroll during tasks' dragging.

Denying dragging of specific tasks

To deny dragging of specific tasks, use the onBeforeTaskDrag event:

gantt.attachEvent("onBeforeTaskDrag", function(id, mode, e){
    if(gantt.getGlobalTaskIndex(id)%2==0){
        return false;      //denies dragging if the global task index is odd
    }
    return true;           //allows dragging if the global task index is even
});

Denying dragging tasks out of specific dates

To deny dragging tasks out of specific dates, use the onTaskDrag event.

The onTaskDrag event:

Fires each time the user makes a drag movement with the mouse in the timeline area: moves, resizes a task or changes the task's progress.
The type of a drag movement is passed as the 2nd argument - mode.
All available values of the drag movement's type are stored in the drag_mode property.

Shortly, all happens in the following order:

The user makes a move.
dhtmlxGantt recalculates the task's date according to the new position.
dhtmlxGantt fires the onTaskDrag event.
dhtmlxGantt re-renders the task in the Gantt chart.

As the onTaskDrag event fires after dhtmlxGantt makes recalculation, you can specify any custom values for the dragged task in the event's handler, without being afraid that these values will be overwritten. As a result, the task will be rendered in the desired position.

Let's assume that you want to forbid users to drag tasks out of the "31 March, 2020 - 11 April, 2020" interval.

Then, you can use the code as in:

Denying dragging tasks out of interval - [31.03.2020, 11.04.2020]

var leftLimit = new Date(2020, 2 ,31), rightLimit = new Date(2020, 3 ,12);
 
gantt.attachEvent("onTaskDrag", function(id, mode, task, original){
    var modes = gantt.config.drag_mode;
    if(mode == modes.move || mode == modes.resize){
 
        var diff = original.duration*(1000*60*60*24);
 
        if(+task.end_date > +rightLimit){
            task.end_date = new Date(rightLimit);
            if(mode == modes.move)
                task.start_date = new Date(task.end_date - diff);
            }
        if(+task.start_date < +leftLimit){
            task.start_date = new Date(leftLimit);
            if(mode == modes.move)
                task.end_date = new Date(+task.start_date + diff);
        }
    }
});

Dragging children together with the parent

To allow dragging children when the user is dragging their parent's task, use the onTaskDrag event (see more on the event above):

gantt.attachEvent("onTaskDrag", function(id, mode, task, original){
    var modes = gantt.config.drag_mode;
    if(mode == modes.move){
        var diff = task.start_date - original.start_date;
        gantt.eachTask(function(child){
            child.start_date = new Date(+child.start_date + diff);
            child.end_date = new Date(+child.end_date + diff);
            gantt.refreshTask(child.id, true);
        },id );
    }
});
//rounds positions of the child items to scale
gantt.attachEvent("onAfterTaskDrag", function(id, mode, e){
    var modes = gantt.config.drag_mode;
    if(mode == modes.move ){
        var state = gantt.getState();
        gantt.eachTask(function(child){          
            child.start_date = gantt.roundDate({
                date:child.start_date, 
                unit:state.scale_unit, 
                step:state.scale_step
            });         
            child.end_date = gantt.calculateEndDate(child.start_date, 
                child.duration, gantt.config.duration_unit);
            gantt.updateTask(child.id);
        },id );
    }
});

Dragging projects with subtasks

This functionality is available in the Gantt PRO edition only.

Tasks of the project type are not draggable by default. You can enable drag and drop of projects using the drag_project config:

gantt.config.drag_project = true;

Related sample: Draggable projects

Dragging dependent tasks together with independent tasks

There are several ways of implementing tasks moving with their dependent tasks. You can read about all of them in a separate article Dragging Tasks Together with Their Dependent Tasks.

Setting minimal task duration

Minimal task duration can be specified via the min_duration setting.

The option defines the minimum size of the task that can be set during resizing and can be used for preventing users from setting a zero duration.

The value is set in milliseconds:

// 1 day
gantt.config.min_duration = 24*60*60*1000;
 
//OR
 
// 1 hour
gantt.config.min_duration = 60*60*1000;

Autoscroll during tasks' dragging

If you have a large dataset in the Gantt chart, you often need to drag a task to a new distant position or set links between tasks located at a significant distance.

In this case the autoscroll functionality is of great help. It is enabled by default, but you can manage this behavior via the autoscroll configuration option.

gantt.config.autoscroll = false;
gantt.init("gantt_here");

Besides, you can adjust the speed of autoscrolling in milliseconds with the help of the corresponding property - autoscroll_speed:

gantt.config.autoscroll = true;
gantt.config.autoscroll_speed = 50;
 
gantt.init("gantt_here");