Создание или выбор задач с помощью перетаскивания

Библиотека dhtmlxGantt включает расширение, которое улучшает возможности перетаскивания при работе с задачами на временной шкале.

Расширение click_drag предназначено для:

Создания задач с помощью перетаскивания
Установки времени для незапланированных задач с помощью перетаскивания
Выбора задач с помощью перетаскивания
Создания частей разделенных задач с помощью перетаскивания (доступно в PRO версии)

Чтобы использовать это расширение, активируйте плагин click_drag с помощью метода gantt.plugins.

Чтобы активировать расширенное перетаскивание, настройте опцию gantt.config.click_drag и определите необходимые свойства из списка ниже в его объекте:

gantt.config.click_drag = {
    callback: onDragEnd,
    singleRow: true
};

Доступные свойства

className - (string) Назначает пользовательский CSS класс выбранному элементу.
render - (function) Функция для создания элемента, который появляется во время перетаскивания. Принимает два параметра:
- startPoint - (object) Объект, структурированный как:
  {absolute: {left: number, top: number}, relative: {left: number, top: number}},
  где absolute относится к координатам от левого верхнего угла документа, а relative представляет координаты относительно элемента viewport.
- endPoint - (object) Аналогично startPoint, структурирован как:
  {absolute: {left: number, top: number}, relative: {left: number, top: number}}.
viewPort - (HTMLElement) Элемент для привязки событий и выбора.
useRequestAnimationFrame - (boolean) Определяет, используется ли requestAnimationFrame во время рендеринга.
callback - (function) Функция, срабатывающая при отпускании кнопки мыши. Принимает шесть параметров:
- startPoint - (object) Та же структура, что и выше.
- endPoint - (object) Та же структура, что и выше.
- startDate - (Date) Дата, соответствующая начальной точке.
- endDate - (Date) Дата, соответствующая конечной точке.
- tasksBetweenDates - (array) Список задач между начальной и конечной датами.
- tasksInRows - (array) Список задач, выбранных между вертикальными начальной и конечной координатами.
singleRow - (boolean) Если true, ограничивает выбор одной строкой, соответствующей высоте задачи.

События для перетаскивания

Вы можете привязать следующие события к элементу, используемому в качестве viewPort (по умолчанию gantt.$task_data, что является секцией временной шкалы с задачами):

onBeforeDrag - Срабатывает после нажатия кнопки мыши, но до начала перетаскивания.
onDrag - Срабатывает многократно после начала перетаскивания и до отпускания кнопки мыши.
onBeforeDragEnd - Срабатывает после отпускания кнопки мыши, но до удаления отображаемого элемента и определения задач под выбором.
onDragEnd - Срабатывает после удаления отображаемого элемента и определения задач под выбором, но до выполнения функции callback (если она определена).

Создание задач с помощью перетаскивания

Задачи можно создавать непосредственно на временной шкале, щелкнув по пустой области для установки даты начала задачи и перетаскивания вправо для определения ее продолжительности.

gantt.config.click_drag = {
    callback: onDragEnd,
    singleRow: true
};
 
gantt.init("gantt_here");
gantt.parse(tasks);
function onDragEnd(startPoint, endPoint, startDate, endDate, tasksBetweenDates, tasksInRow) {
    if (tasksInRow.length === 1) {
        var parent = tasksInRow[0];
        gantt.createTask({
            text: "Подзадача " + parent.text,
            start_date: gantt.roundDate(startDate),
            end_date: gantt.roundDate(endDate)
        }, parent.id);
    } else if (tasksInRow.length === 0) {
        gantt.createTask({
            text: "Новая задача",
            start_date: gantt.roundDate(startDate),
            end_date: gantt.roundDate(endDate)
        });
    }
}

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

С помощью расширения click_drag вы можете назначить время незапланированным задачам с помощью перетаскивания.

Выбор задач с помощью перетаскивания

Задачи можно выбирать с помощью перетаскивания в различных режимах, таких как по датам, по строкам или в пределах границ.

gantt.config.multiselect = true;
gantt.config.click_drag = {
    callback: onDragEnd
};
 
gantt.config.autoscroll = true;
gantt.config.autoscroll_speed = 50;
gantt.init("gantt_here");
gantt.parse(tasks);
function onDragEnd(startPoint, endPoint, startDate, endDate, tasksBetweenDates, tasksInRows) {
    var mode = document.querySelector("input[name=selectMode]:checked").value;
    switch (mode) {
        case "1":
            unselectTasks();
            tasksBetweenDates.forEach(function(item) {
                gantt.selectTask(item.id);
            });
            break;
        case "2":
            unselectTasks();
            tasksInRows.forEach(function(item) {
                gantt.selectTask(item.id);
            });
            break;
        case "3":
            unselectTasks();
            for (var i = 0; i < tasksBetweenDates.length; i++) {
                for (var j = 0; j < tasksInRows.length; j++) {
                    if (tasksBetweenDates[i] === tasksInRows[j]) {
                        gantt.selectTask(tasksBetweenDates[i].id);
                    }
                }
            }
            break;
        default:
            return;
    }
}

Создание частей разделенных задач

Функция перетаскивания также поддерживает создание частей разделенных задач.

gantt.config.click_drag = {
    callback: onDragEnd,
    singleRow: true
};
 
gantt.init("gantt_here");
gantt.parse(tasks);
function onDragEnd(startPoint, endPoint, startDate, endDate, tasksBetweenDates, tasksInRow) {
    if (tasksInRow.length === 1) {
        var currentTask = tasksInRow[0];
        if (currentTask.type === "project") {
            currentTask.render = "split";
            gantt.addTask({
                text: "Подзадача " + currentTask.text,
                start_date: gantt.roundDate(startDate),
                end_date: gantt.roundDate(endDate)
            }, currentTask.id);
        } else {
            var projectName = "новый проект " + currentTask.text;
            var newProject = gantt.addTask({
                text: projectName,
                render: "split",
                type: "project"
            }, currentTask.parent);
            gantt.moveTask(
                newProject,
                gantt.getTaskIndex(currentTask.id),
                gantt.getParent(currentTask.id)
            );
            gantt.moveTask(currentTask.id, 0, newProject);
            gantt.calculateTaskLevel(currentTask);
 
            var newTask = gantt.addTask({
                text: "Подзадача " + projectName,
                start_date: gantt.roundDate(startDate),
                end_date: gantt.roundDate(endDate)
            }, newProject);
            gantt.calculateTaskLevel(newTask);
        }
    } else if (tasksInRow.length === 0) {
        gantt.createTask({
            text: "Новая задача",
            start_date: gantt.roundDate(startDate),
            end_date: gantt.roundDate(endDate)
        });
    }
}

К началу