How to drag Task 'up and down？

Gantt
#1

hello

How to move the drag taskbar up and down?

If I have a weekend in my taskbar time span, let me use a different color for the weekend taskbar. What do I do?

Machine translated English, please understand.

thank you

image
image1834×429 30.8 KB

image
image1267×530 31.5 KB

#2

Hello Ryan,

How to move the drag taskbar up and down?

Unfortunately, right now, there is no built-in way to vertically reorder tasks in the timeline. The dev team will add that feature in the future, but I cannot give you any ETA.
For now, you need to implement a custom solution by using the Gantt API and Javascript.
I have the following examples of the implementation that can help you to start:
https://snippet.dhtmlx.com/5/18235007f
https://snippet.dhtmlx.com/5/b15689fce

If I have a weekend in my taskbar time span, let me use a different color for the weekend taskbar. What do I do?

If we consider the task bars in an abstract way, they are single rectangle elements. They don’t consist of several rectangles (horizontally). So if you want to show a different color for the task bars during weekend days, you need to display additional rectangles on top of them or show several rectangles inside the task bar.

If you want to display the weekend cells on top of the task bars, you can add the following style rules for the weekend cells:

        z-index: 1;
        opacity: 0.5;
        pointer-events: none;

Here is an example:
https://snippet.dhtmlx.com/qtnc7zok

If you want to show a different color when the weekend cellis over the tasks, you can return different class names:

/* js: */

gantt.templates.timeline_cell_class = function (task, date) {
    if (!gantt.isWorkTime({ date: date, task: task })) {
        if (+task.start_date <= +date && +date <= +task.end_date) {
            return "weekend_over_task"
        }
        return "weekend";
    }
};

/* css: */
.weekend {
	background: #FFB9CF !important;
}
.weekend_over_task {
	background: orange;
        z-index: 1;
        opacity:0.9;
        pointer-events: none;
}

Here is an example:
https://snippet.dhtmlx.com/d1rwwlzq

If you want to show several rectangles inside the task bar, you need to use the task_text template:
https://docs.dhtmlx.com/gantt/api__gantt_task_text_template.html

Here is an example of how it can be implemented:
https://snippet.dhtmlx.com/yo4ol6t8

1 Like
#4

Hello Ramil,
I realized the vertical drag through your code, but I found that the subtask would trigger the “onBeforeTaskUpdate” event twice every time I dragged vertically, which caused me to call the update interface twice when I was integrating the server , I think this is inappropriate, how can I avoid it?
The code is as follows. Through the console, you can see that the dragged task triggered two update events. The first time his data did not change, but the update event was triggered.
http://snippet.dhtmlx.com/5/47961c065

#5

Hello,
When you drag the task the first time, you are actually dragging it horizontally. Only its dates are changed. But the custom implementation makes it look as if you drag the task vertically.
After you finished dragging the task, Gantt sends the changes to the server and calls the onAfterTaskDrag event. Then the code in the event handler is executed. This is the second time Gantt sends the changes to the server. This is expected behavior.

You can return false in the onBeforeTaskUpdate event handler for the dragged task before the onAfterTaskDrag event is called. Then the variable that indicates that the task is dragged is disabled, so you can call the updateTask method, and Gantt will send the changes to the server.

You can also wrap the moveTask and updateTask methods by the batchUpdate function to repaint the changes only once.
Here is the updated snippet:
http://snippet.dhtmlx.com/5/973cd544a

1 Like
#7

Hi Ramil,
Thank you so much for helping me out with this problem, it helped me a lot, have a nice day!

1 Like