Beispiele Forum Unterstützung
Dokumentation
StartAnleitungenEinrichten von Aufgaben

Verschieben von Aufgaben in der Zeitleiste

Das Verschieben von Aufgaben in der Zeitleiste erleichtert es, deren Start- oder Enddaten und Dauer anzupassen. Standardmäßig ist Drag-and-Drop aktiviert, sodass Aufgaben entlang ihrer Zeilen verschoben werden können.

Um die Funktionsweise des Verschiebens anzupassen, können Sie diese Ereignisse verwenden:

  • onBeforeTaskDrag: Einschränkung des Verschiebens für bestimmte Aufgaben.
  • onTaskDrag: Kontrolle der Ziehgrenzen oder Hinzufügen von benutzerdefinierter Logik während des Verschiebens.
  • onAfterTaskDrag: Änderungen anwenden, nachdem eine Aufgabe neu positioniert wurde.

Hier sind einige gängige Szenarien, in denen das Standardverhalten des Ziehens angepasst werden muss:

  1. Einschränkung des Verschiebens für bestimmte Aufgaben.
  2. Verhindern, dass Aufgaben außerhalb bestimmter Daten gezogen werden.
  3. Verschieben von untergeordneten Aufgaben zusammen mit der übergeordneten.
  4. Verschieben von Projekten zusammen mit Unteraufgaben.
  5. Festlegen einer minimalen Aufgabendauer.
  6. Aktivieren des automatischen Scrollens beim Verschieben von Aufgaben.

Einschränkung des Verschiebens für bestimmte Aufgaben

Um zu verhindern, dass bestimmte Aufgaben verschoben werden, kann das onBeforeTaskDrag-Ereignis verwendet werden:

gantt.attachEvent("onBeforeTaskDrag", function(id, mode, e){
    if(gantt.getGlobalTaskIndex(id) % 2 == 0){
        return false;      // Verhindern des Verschiebens, wenn der globale Aufgabenindex gerade ist
    }
    return true;           // Erlauben des Verschiebens, wenn der globale Aufgabenindex ungerade ist
});

Verhindern, dass Aufgaben außerhalb bestimmter Daten gezogen werden

Sie können das onTaskDrag-Ereignis verwenden, um sicherzustellen, dass Aufgaben innerhalb eines definierten Datumsbereichs bleiben.

Das onTaskDrag-Ereignis:

  • Wird ausgelöst, wenn eine Aufgabe verschoben, ihre Größe geändert oder ihr Fortschritt in der Zeitleiste angepasst wird.
  • Das zweite Argument, mode, gibt die Art der Ziehaktion an.
  • Verfügbare Ziehmodi sind in der **drag_mode**-Eigenschaft aufgeführt.

Kurz gesagt, so funktioniert es:

  1. Der Benutzer zieht die Aufgabe.
  2. dhtmlxGantt berechnet das neue Datum der Aufgabe basierend auf ihrer Position neu.
  3. Das **onTaskDrag**-Ereignis wird ausgelöst.
  4. Die Aufgabe wird im Gantt-Diagramm neu gerendert.

    Da dieses Ereignis nach den Neuberechnungen ausgelöst wird, können Sie benutzerdefinierte Werte für die Aufgabe im Ereignishandler festlegen, ohne sich Gedanken darüber machen zu müssen, dass sie überschrieben werden. Die Aufgabe wird an der angepassten Position angezeigt.


Um beispielsweise das Ziehen von Aufgaben außerhalb des Datumsbereichs "31. März 2020 - 11. April 2020" zu verhindern, können Sie den folgenden Code verwenden:

Verhindern des Ziehens von Aufgaben außerhalb des Intervalls - [31.03.2020, 11.04.2020] 

var leftLimit = new Date(2020, 2, 31), rightLimit = new Date(2020, 3, 12);
 
gantt.attachEvent("onTaskDrag", function(id, mode, task, original){
    var modes = gantt.config.drag_mode;
    if(mode == modes.move || mode == modes.resize){
 
        var diff = original.duration * (1000 * 60 * 60 * 24);
 
        if(+task.end_date > +rightLimit){
            task.end_date = new Date(rightLimit);
            if(mode == modes.move)
                task.start_date = new Date(task.end_date - diff);
            }
        if(+task.start_date < +leftLimit){
            task.start_date = new Date(leftLimit);
            if(mode == modes.move)
                task.end_date = new Date(+task.start_date + diff);
        }
    }
});

Related sample:  Drag parent task with its children

Verschieben von untergeordneten Aufgaben zusammen mit der übergeordneten

Um untergeordnete Aufgaben zu verschieben, wenn ihre übergeordnete Aufgabe verschoben wird, verwenden Sie das onTaskDrag-Ereignis (Details oben):

gantt.attachEvent("onTaskDrag", function(id, mode, task, original){
    var modes = gantt.config.drag_mode;
    if(mode == modes.move){
        var diff = task.start_date - original.start_date;
        gantt.eachTask(function(child){
            child.start_date = new Date(+child.start_date + diff);
            child.end_date = new Date(+child.end_date + diff);
            gantt.refreshTask(child.id, true);
        }, id);
    }
});
 
// Ausrichten der untergeordneten Aufgaben an die Skala nach dem Ziehen
gantt.attachEvent("onAfterTaskDrag", function(id, mode, e){
    var modes = gantt.config.drag_mode;
    if(mode == modes.move){
        var state = gantt.getState();
        gantt.eachTask(function(child){          
            child.start_date = gantt.roundDate({
                date: child.start_date, 
                unit: state.scale_unit, 
                step: state.scale_step
            });         
            child.end_date = gantt.calculateEndDate(child.start_date, 
                child.duration, gantt.config.duration_unit);
            gantt.updateTask(child.id);
        }, id);
    }
});

Verschieben von Projekten zusammen mit Unteraufgaben

Diese Funktion ist exklusiv für die Gantt PRO Edition.

Standardmäßig können Aufgaben des Projekttyps nicht gezogen werden. Um dies zu aktivieren, setzen Sie die drag_project-Option auf true:

gantt.config.drag_project = true;

Related sample:  Draggable projects

Verschieben von abhängigen Aufgaben zusammen mit unabhängigen Aufgaben

Für Details zum Verschieben von Aufgaben zusammen mit ihren Abhängigkeiten lesen Sie den speziellen Artikel: Verschieben von Aufgaben zusammen mit ihren abhängigen Aufgaben.

Festlegen einer minimalen Aufgabendauer

Sie können die kürzeste Dauer festlegen, die eine Aufgabe beim Ändern der Größe haben kann, mithilfe der min_duration-Einstellung. Dies verhindert Aufgaben mit null Dauer.

Geben Sie den Wert in Millisekunden an:

// Minimale Dauer auf 1 Tag gesetzt
gantt.config.min_duration = 24 * 60 * 60 * 1000;
 
// ODER
 
// Minimale Dauer auf 1 Stunde gesetzt
gantt.config.min_duration = 60 * 60 * 1000;

Automatisches Scrollen beim Verschieben von Aufgaben

Beim Arbeiten mit großen Datensätzen kann das Verschieben von Aufgaben über entfernte Positionen oder das Verknüpfen von weit entfernten Aufgaben schwierig sein. Die autoscroll-Funktion vereinfacht dies. Sie ist standardmäßig aktiviert, kann aber mit der autoscroll-Einstellung gesteuert werden:

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

Sie können auch die Scrollgeschwindigkeit in Millisekunden mit der autoscroll_speed-Eigenschaft anpassen:

gantt.config.autoscroll = true;
gantt.config.autoscroll_speed = 50;
 
gantt.init("gantt_here");

Deaktivieren der Größenänderung für bestimmte Aufgaben

Um zu verhindern, dass bestimmte Aufgaben in ihrer Größe verändert werden, haben Sie zwei Möglichkeiten:

  1. Verbergen der Größenänderungsgriffe über CSS. Verwenden Sie die task_class-Vorlage, um einer Aufgabe eine CSS-Klasse zuzuweisen, die Sie verändern möchten:
gantt.templates.task_class = function(start, end, task){
    if(task.no_resize) { // 'no_resize' ist eine benutzerdefinierte Eigenschaft
        return "no_resize";
    }
    return "";
};

Dann verbergen Sie die Größenänderungsgriffe mit CSS:

.no_resize .gantt_task_drag {
   display: none !important;
}
  1. Verhindern der Größenänderung programmatisch mit dem onBeforeTaskDrag-Ereignis. Geben Sie false zurück, um die Größenänderung zu blockieren:
gantt.attachEvent("onBeforeTaskDrag", function(id, mode, e){
    if(mode === "resize" && gantt.getTask(id).no_resize){
        return false;
    }
    return true;
});

Identifizieren, welche Seite einer Aufgabe in ihrer Größe verändert wird

Der "resize"-Modus von Drag-and-Drop ermöglicht das Ändern entweder des Start- oder Enddatums einer Aufgabe. Um zu bestimmen, welche Seite in ihrer Größe verändert wird, verwenden Sie das gantt.getState().drag_from_start-Flag:

gantt.attachEvent("onBeforeTaskDrag", function(id, mode, e){
    if(mode === "resize"){
        if(gantt.getState().drag_from_start === true) {
            // Startdatum wird geändert
        } else {
            // Enddatum wird geändert
        }
    }
    return true;
});

Deaktivieren der Größenänderung für Start- oder Enddaten

Um die Größenänderung für bestimmte Daten zu deaktivieren, lokalisieren Sie die Größenänderungsgriffe mit diesen Selektoren:

  • .gantt_task_drag[data-bind-property="start_date"]
  • .gantt_task_drag[data-bind-property="end_date"]

Um beispielsweise die Größenänderung von Startdaten zu deaktivieren:

.gantt_task_drag[data-bind-property="start_date"] {
   display: none !important;
}

Um die Größenänderung von Enddaten zu deaktivieren:

.gantt_task_drag[data-bind-property="end_date"] {
   display: none !important;
}

Alternativ können Sie das onBeforeTaskDrag-Ereignis verwenden, um die Größenänderung programmatisch zu blockieren:

gantt.attachEvent("onBeforeTaskDrag", function(id, mode, e){
    if(mode === "resize"){
        if(gantt.getState().drag_from_start === true) {
             return false; // Blockieren der Größenänderung des Startdatums
        } else {
             // Erlauben der Größenänderung des Enddatums
        }
    }
    return true;
});
Zurück nach oben