Aufgaben innerhalb der Timeline ziehen

Durch Ziehen können Benutzer schnell die Start- (End-)Daten der Aufgaben sowie deren Dauer ändern. Standardmäßig ist Drag-and-Drop aktiviert, und der Benutzer kann eine Aufgabe entlang ihrer Zeile in der Timeline ziehen.

Um das Drag-and-Drop-Verhalten anzupassen, verwenden Sie die folgenden Events:

• onBeforeTaskDrag - um das Ziehen bestimmter Aufgaben zu verweigern
• onTaskDrag - um den Bereich für das Ziehen zu begrenzen oder eine andere Logik bereitzustellen, wenn der Benutzer eine Aufgabe zieht
• onAfterTaskDrag - um Aufgaben nach dem Verschieben an einen neuen Ort nachzubearbeiten

Betrachten wir typische Fälle, in denen das Standard-Drag-Verhalten angepasst werden muss:

1. Verweigern des Ziehens bestimmter Aufgaben.
2. Verweigern des Ziehens von Aufgaben außerhalb bestimmter Termine.
3. Ziehen von Kindern zusammen mit der Elternaufgabe.
4. Ziehen von Projekten mit Unteraufgaben.
5. Festlegen der minimalen Aufgabendauer.
6. Autoscroll während des Ziehens von Aufgaben.

Verweigern des Ziehens bestimmter Aufgaben

Um das Ziehen bestimmter Aufgaben zu verweigern, verwenden Sie das onBeforeTaskDrag Event:

gantt.attachEvent("onBeforeTaskDrag", (taskId, dragMode, event) => {
    if (gantt.getGlobalTaskIndex(taskId) % 2 === 0) {
        return false; // verweigert das Ziehen, wenn der globale Aufgabenindex gerade ist
    }
    return true; // erlaubt das Ziehen, wenn der globale Aufgabenindex ungerade ist
});

Verweigern des Ziehens von Aufgaben außerhalb bestimmter Termine

Um das Ziehen von Aufgaben außerhalb bestimmter Termine zu verweigern, verwenden Sie das onTaskDrag Event.

Das onTaskDrag-Ereignis:

• Wird jedes Mal ausgelöst, wenn der Benutzer eine Drag-Bewegung mit der Maus im Timeline-Bereich ausführt: Verschieben, Ändern der Größe einer Aufgabe oder Ändern des Fortschritts der Aufgabe.
• Der Typ einer Drag-Bewegung wird als zweites Argument übergeben - mode.
• Alle verfügbaren Werte des Typs der Drag-Bewegung sind in der drag_mode-Eigenschaft gespeichert.

Kurz gesagt, läuft alles in folgender Reihenfolge ab:

1. Der Benutzer führt eine Bewegung aus.
2. dhtmlxGantt berechnet das Datum der Aufgabe entsprechend der neuen Position neu.
3. dhtmlxGantt löst das onTaskDrag Event aus.
4. dhtmlxGantt rendert die Aufgabe im Gantt-Diagramm neu.
   Da das onTaskDrag Event nach der Neuberechnung ausgelöst wird, können Sie beliebige benutzerdefinierte Werte für die verschobene Aufgabe im Handler des Events festlegen, ohne befürchten zu müssen, dass diese Werte überschrieben werden. Dadurch wird die Aufgabe in der gewünschten Position dargestellt.

Angenommen, Sie möchten verhindern, dass Benutzer Aufgaben außerhalb des „31. März 2028 – 11. April 2028“ Intervalls ziehen.

Dann können Sie den Code wie folgt verwenden:

const leftLimit = new Date(2028, 2, 31);
const rightLimit = new Date(2028, 3, 12);
const millisecondsInDay = 24 * 60 * 60 * 1000;

gantt.attachEvent("onTaskDrag", (taskId, dragMode, task, originalTask) => {
    const dragModes = gantt.config.drag_mode;

    if (dragMode === dragModes.move || dragMode === dragModes.resize) {
        const taskDuration = originalTask.duration * millisecondsInDay;

        if (+task.end_date > +rightLimit) {
            task.end_date = new Date(rightLimit);
            if (dragMode === dragModes.move) {
                task.start_date = new Date(task.end_date - taskDuration);
            }
        }

        if (+task.start_date < +leftLimit) {
            task.start_date = new Date(leftLimit);
            if (dragMode === dragModes.move) {
                task.end_date = new Date(+task.start_date + taskDuration);
            }
        }
    }
});

Ziehen von Kindaufgaben zusammen mit der Elternaufgabe

Um das Ziehen von Kindaufgaben zu ermöglichen, während der Benutzer die Aufgabe des Elternteils zieht, verwenden Sie das onTaskDrag Event (siehe weiter oben auf das Event oben):

gantt.attachEvent("onTaskDrag", (taskId, dragMode, task, originalTask) => {
    const dragModes = gantt.config.drag_mode;

    if (dragMode === dragModes.move) {
        const dateShift = task.start_date - originalTask.start_date;
        gantt.eachTask((child) => {
            child.start_date = new Date(+child.start_date + dateShift);
            child.end_date = new Date(+child.end_date + dateShift);
            gantt.refreshTask(child.id, true);
        }, taskId);
    }
});

// rundet die Positionen der Kindobjekte an den Maßstab an
gantt.attachEvent("onAfterTaskDrag", (taskId, dragMode, event) => {
    const dragModes = gantt.config.drag_mode;

    if (dragMode === dragModes.move) {
        const ganttState = gantt.getState();
        gantt.eachTask((child) => {
            child.start_date = gantt.roundDate({
                date: child.start_date,
                unit: ganttState.scale_unit,
                step: ganttState.scale_step
            });
            child.end_date = gantt.calculateEndDate(
                child.start_date,
                child.duration,
                gantt.config.duration_unit
            );
            gantt.updateTask(child.id);
        }, taskId);
    }
});

Related sample: Drag parent task with its children

Ziehen von Projekten mit Unteraufgaben

Info

Diese Funktionalität ist nur in der Gantt PRO-Edition verfügbar.

Aufgaben des Projekt-Typs sind standardmäßig nicht verschiebbar. Sie können Drag & Drop von Projekten über die Konfiguration drag_project aktivieren:

gantt.config.drag_project = true;

Related sample: Draggable projects

Ziehen abhängiger Aufgaben zusammen mit unabhängigen Aufgaben

Es gibt mehrere Wege, Aufgaben zusammen mit ihren abhängigen Aufgaben zu verschieben. Sie können alles darüber in einem separaten Artikel Dragging Tasks Together with Their Dependent Tasks nachlesen.

Minimale Aufgabendauer festlegen

Die minimale Aufgabendauer kann über die Einstellung min_duration festgelegt werden.

Die Option definiert die minimale Größe der Aufgabe, die beim Ändern der Größe festgelegt werden kann, und kann verwendet werden, um zu verhindern, dass Benutzer eine Null-Dauer festlegen.

Der Wert wird in Millisekunden festgelegt:

// 1 Tag
gantt.config.min_duration = 24 * 60 * 60 * 1000;

// ODER

// 1 Stunde
gantt.config.min_duration = 60 * 60 * 1000;

Autoscroll während des Ziehens von Aufgaben

Wenn Sie einen großen Datensatz im Gantt-Diagramm haben, müssen Sie oft eine Aufgabe zu einer weit entfernten Position ziehen oder Verbindungen zwischen Aufgaben herstellen, die weit voneinander entfernt liegen.

In diesem Fall ist die Autoscroll-Funktionalität sehr hilfreich. Sie ist standardmäßig aktiviert, aber Sie können dieses Verhalten über die Konfigurationsoption autoscroll steuern.

gantt.config.autoscroll = false;
gantt.init("gantt_here");

Außerdem können Sie die Geschwindigkeit des Autoscrollings in Millisekunden mit der entsprechenden Eigenschaft - autoscroll_speed - anpassen:

gantt.config.autoscroll = true;
gantt.config.autoscroll_speed = 50;

gantt.init("gantt_here");

Deaktivieren der Größenänderung bestimmter Aufgaben

Wenn Sie verhindern möchten, dass bestimmte Aufgaben ihre Größe ändern, gibt es zwei Möglichkeiten:

1. Entfernen Sie die Griffe zum Ändern der Größe einer Aufgabe aus der Benutzeroberfläche über CSS. Dazu verwenden Sie die task_class-Vorlage, um den betreffenden Elementen eine zusätzliche CSS-Klasse hinzuzufügen, sodass Sie sie über den Selektor finden können:

gantt.templates.task_class = (startDate, endDate, task) => {
    if (task.no_resize) { // no_resize ist eine benutzerdefinierte Eigenschaft, die der Demonstration dient
        return "no_resize";
    }
    return "";
};

Dann können Sie die Griffe zum Ändern der Größe mit folgendem CSS ausblenden:

.no_resize .gantt_task_drag {
    display: none !important;
}

2. Verhindern Sie Drag & Drop aus dem Code über das onBeforeTaskDrag Event. Wenn der Handler false zurückgibt, wird das Größenändern verhindert:

gantt.attachEvent("onBeforeTaskDrag", (taskId, dragMode, event) => {
    if (dragMode === "resize" && gantt.getTask(taskId).no_resize) {
        return false;
    }
    return true;
});