Dragging tasks within the end date of source task DHTMLX Gantt

Question

i customize a DHTMLX gantt with my db. For Data i only choose id, text, start_date, duration and end_date. For links i choose id, souce, target and type, all types are 0.

I’ve done dragging task together with their dependent task, moving task manualy. Moving Descendants synchronously with the main task( link: https://docs.dhtmlx.com/gantt/desktop__dragging_dependent_tasks.html#movingtasksmanually )

I’ve add to my gantt.aspx this code:

gantt.eachSuccessor = function (callback, root) {
if (!this.isTaskExists(root))
return;

  // remember tasks we've already iterated in order to avoid infinite loops
        var traversedTasks = arguments[2] || {};
        if (traversedTasks[root])
            return;
        traversedTasks[root] = true;

        var rootTask = this.getTask(root);
        var links = rootTask.$source;
        if (links) {
            for (var i = 0; i < links.length; i++) {
                var link = this.getLink(links[i]);
                if (this.isTaskExists(link.target) && !traversedTasks[link.target]) {
                    callback.call(this, this.getTask(link.target));

                    // iterate the whole branch, not only first-level dependencies
                    this.eachSuccessor(callback, link.target, traversedTasks);
                }
            }
        }
    };

    gantt.attachEvent("onTaskDrag", function (id, mode, task, original) {
        var modes = gantt.config.drag_mode;

        if (mode == modes.move) {
            var diff = task.start_date - original.start_date;
            gantt.eachSuccessor(function (child) {
               
                    child.start_date = new Date(+child.start_date + diff);
                    child.end_date = new Date(+child.end_date + diff);
                    gantt.refreshTask(child.id, true);
                }, id);
            }
        return true;
    });
    gantt.attachEvent("onAfterTaskDrag", function (id, mode, e) {
        var modes = gantt.config.drag_mode;
        if (mode == modes.move) {
            gantt.eachSuccessor(function (child) {
                child.start_date = gantt.roundDate(child.start_date);
                child.end_date = gantt.calculateEndDate(child.start_date, child.duration);
                gantt.updateTask(child.id);
            }, id);
        }
    });```


Now i have to add the constrain that a child(target) task can’t move before the end date of father(source). I have to add a Left limit for all tasks, but i have no idea how to do, because i haven’t “parent” on my data details.

Answer 1

In the onTaskDrag event handler you have the task object of the task you are dragging. For the related tasks, there is the child variable, though the tasks are not necessarily the children of the dragged task. So, you can get the end date of the task you are dragging from the task object. In the onAfterTaskDrag event handler, you don't have the task object, but you can get it by using the gantt.getTask(id) method:

    gantt.attachEvent("onAfterTaskDrag", function (id, mode, e) {
        var task = gantt.getTask(id);
        var modes = gantt.config.drag_mode;
        if (mode == modes.move) {
            gantt.eachSuccessor(function (child) {
                child.start_date = gantt.roundDate(child.start_date);
                child.end_date = gantt.calculateEndDate(child.start_date, child.duration);
                gantt.updateTask(child.id);
            }, id);
        }
    });

https://docs.dhtmlx.com/gantt/api__gantt_gettask.html

You can also use the auto-scheduling feature: https://docs.dhtmlx.com/gantt/desktop__auto_scheduling.html