Изменение порядка задач

dhtmlxGantt предоставляет 2 способа изменения порядка задач в гриде:

Перетаскивание.
Сортировка (см. подробности).

Эти способы являются альтернативами. По умолчанию оба режима отключены.

Чтобы включить изменение порядка перетаскиванием, используйте опцию order_branch:

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

Связанный пример: Упорядочение ветвей

Вы можете посмотреть видеоруководство, которое демонстрирует, как сортировать задачи и изменять их порядок в гриде.

Перетаскивание внутри всей структуры Gantt

Опция order_branch позволяет перетаскивать задачи внутри одного уровня дерева.

Также можно включить режим, в котором порядок задач можно изменять внутри всего Gantt. Это означает, что задача может заменить другую задачу любого уровня дерева. Чтобы использовать такой тип изменения порядка задач, используйте опцию order_branch_free:

// изменение порядка задач внутри всего gantt
gantt.config.order_branch = true;
gantt.config.order_branch_free = true;
 
gantt.init("gantt_here");

Связанный пример: Перетаскивание строк в грид

Запрещение сброса в конкретные позиции

Чтобы запретить сброс задач в конкретные позиции, используйте событие onBeforeTaskMove или onBeforeRowDragEnd:

//предотвращение перемещения в другую подветку:
gantt.attachEvent("onBeforeTaskMove", function(id, parent, tindex){
    var task = gantt.getTask(id);
    if(task.parent != parent)
        return false;
    return true;
});

//или
gantt.attachEvent("onBeforeRowDragEnd", function(id, parent, tindex){
      var task = gantt.getTask(id);
    if(task.parent != parent)
        return false;
    return true;
});

Улучшение производительности для больших наборов данных

Если в вашем Gantt много задач, режим изменения порядка ветвей по умолчанию может замедлять работу. Чтобы ускорить его, можно использовать режим «marker».

gantt.config.order_branch = "marker";

Связанный пример: Упорядочение ветвей - режим подсветки

В этом режиме перемещается только имя задачи (при удерживании левой кнопки мыши), и Gantt перерисовывается только тогда, когда задача отпускается в целевую позицию (при отпускании клавиши). В отличие от режима по умолчанию изменение позиции задачи не приводит к срабатыванию событий onBeforeTaskMove/onAfterTaskMove.

Чтобы предотвратить сброс задачи в конкретной позиции, используйте событие onBeforeRowDragMove вместо этого (работает только в режиме «marker»).

Подсветка доступных мест назначения во время перетаскивания

Чтобы подсветить доступные места назначения во время перетаскивания (например, невозможно переместить узел корня под другим корнем, и вы хотите визуально информировать пользователя об этом), используйте события onRowDragStart и onRowDragEnd:

gantt.config.order_branch = true;// изменение порядка задач только внутри ветки
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 "";
};