Переупорядочение задач

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

1. Перетаскивание.
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;// 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 "";
};

Вертикальное переупорядочение задач во временной шкале

Следуйте примерам, приведённым в разделе Решения по вертикальному переупорядочению задач во временной шкале.