Skip to main content

onTaskDrag

Description​

Fires when the user drags a task

onTaskDrag: (id: string | number, mode: string, task: Task, original: Task, e: Event) => void;

Parameters​

  • id - (required) string | number - the task id
  • mode - (required) string - the drag mode ("resize", "progress", "move", "ignore")
  • task - (required) Task - the current (dragged) task object
  • original - (required) Task - the original(initial) task object
  • e - (required) Event - a native event object

Example​

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

Details​

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.