Subtask owners under different projects can be exchanged by vertical dragging


Hello, I have multiple projects and I have task splitting, I want to swap the owners of task 1 of project 1 with task 2 of procejt 2 by dragging vertically in the Gantt chart, I don’t know What to do, can you help me?

I also want to know how I can get the task ID of the row where the mouse is, I tried mousemove, unfortunately, I can’t get it without the time frame of the task.


There is no built-in way to drag tasks vertically in the timeline. But you can implement it as a custom solution by using Gantt API. You need to use onBeforeTaskDrag and onAfterTaskDrag events: ; ;
You need to know the index of the location where you will drag your task:

 let target_index = Math.floor(y_pos / gantt.config.row_height);

where y_pos its event.clientY value from onMouseMove handler: ;
And you need to know the parent task’s ID of the new position. You can get it using getTaskByIndex method: ;
In the end, you need to update task to apply changes with updateTask method: ;
Also, you can use the additional task layer feature and display an element when you are dragging the task: ;
Please check the example of how it might be implemented:


Thank you very much for your solution, he gave me a lot of inspiration, but I’m sorry, I can’t afford the cost of the professional version, is there a solution that can be implemented under the standard version?


Here is an updated snippet for the Standard version of Gantt: ;
In this snippet, there is no placeholder for dragging task. If you want to display a placeholder, you can implement it using JS.


Thank you very much for your patient answer. If I want to get the item ID of the row I am in, can I only use Rowindex? Is there a better way?


If you want to get row ID from mouse event handler, you can get the ID from the data-task-id attribute of a row element with the help of gantt.utils module: ;
For example, like this:

const domHelpers = gantt.utils.dom;
    if (domHelpers.closest(, `.gantt_task_row`)) {
        const node =;
        const targetTaskId  = node.getAttribute("data-task-id");
        const targetTask = gantt.getTask(targetTaskId);

Please check the following snippet: