Reordering Tasks

dhtmlxGantt provides 2 ways to reorder tasks in the grid:

Drag-and-drop.
Sorting (see details).

The ways are alternative.
By default, both modes are disabled.

To enable drag-n-drop reordering, use the order_branch option:

gantt.config.order_branch = true;
gantt.init("gantt_here");

Related sample: Branch ordering

Drag-n-drop within the whole Gantt structure

The order_branch option allows dragging tasks within the same Tree level.

It's also possible to enable the mode in which tasks can be reordered within the whole Gantt. It means that a task can replace another task of any Tree level. To use this type of tasks reordering, use the order_branch_free option:

// reordering tasks within the whole gantt
gantt.config.order_branch = true;
gantt.config.order_branch_free = true;
 
gantt.init("gantt_here");

Denying dropping to specific positions

To deny dropping tasks to specific positions, use the onBeforeTaskMove or onBeforeRowDragEnd event:

//prevent moving to another sub-branch:
gantt.attachEvent("onBeforeTaskMove", function(id, parent, tindex){
    var task = gantt.getTask(id);
    if(task.parent != parent)
        return false;
    return true;
});
 
//or
gantt.attachEvent("onBeforeRowDragEnd", function(id, target) {
    var task = gantt.getTask(id);
    if(task.parent != target.parent)
        return false;
    return true;
});

Highlighting available drop places while drag-&-drop

To highlight available target places during dragging (for example, it's not possible to drag the root node under another root and you want visually inform the user about this), use the onRowDragStart and onRowDragEnd events:

gantt.config.order_branch = true;// order tasks only inside a branch
gantt.init("gantt_here");
gantt.parse(demo_tasks);
 
var drag_id = null;
gantt.attachEvent("onRowDragStart", function(id, target, e) {
    drag_id = id;
    return true;
});
gantt.attachEvent("onRowDragEnd", function(id, target) {
    drag_id = null;
    gantt.render();
});
 
gantt.templates.grid_row_class = function(start, end, task){
    if(drag_id && task.id != drag_id){
        if(task.$level != gantt.getTask(drag_id).$level)
            return "cant-drop";
        }
    return "";
};