fires when the user drags a task

void onTaskDrag(string|number id,string mode,object task,object original,Event e);
idstring|numberthe task id
modestringthe drag mode ("resize", "progress", "move", "ignore")
taskobjectthe current (dragged) task object
originalobjectthe original(initial) task object
eEventa native event object


gantt.attachEvent("onTaskDrag", function(id, mode, task, original){
    //any custom logic here

Related samples


The 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:

  1. The user makes a move.
  2. dhtmlxGantt recalculates the task's date according to the new position.
  3. dhtmlxGantt fires the onTaskDrag event.
  4. dhtmlxGantt re-renders the task in the Gantt chart.
See also
Back to top