Subtask owners under different projects can be exchanged by vertical dragging


#1

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.


#2

Hello,
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:
https://docs.dhtmlx.com/gantt/api__gantt_onbeforetaskdrag_event.html ;
https://docs.dhtmlx.com/gantt/api__gantt_onaftertaskdrag_event.html ;
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:
https://docs.dhtmlx.com/gantt/api__gantt_onmousemove_event.html ;
And you need to know the parent task’s ID of the new position. You can get it using getTaskByIndex method:
https://docs.dhtmlx.com/gantt/api__gantt_gettaskbyindex.html ;
In the end, you need to update task to apply changes with updateTask method:
https://docs.dhtmlx.com/gantt/api__gantt_updatetask.html ;
Also, you can use the additional task layer feature and display an element when you are dragging the task:
https://docs.dhtmlx.com/gantt/api__gantt_addtasklayer.html ;
Please check the example of how it might be implemented:
https://snippet.dhtmlx.com/2lyxbqed


#3

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?


#4

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


#5

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?


#6

Hello,
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:
https://docs.dhtmlx.com/gantt/api__gantt_utils_other.html ;
For example, like this:

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

Please check the following snippet:
https://snippet.dhtmlx.com/w8sv7cig