Zum Hauptinhalt springen

Verschieben von Aufgaben innerhalb der Zeitleiste

Das Ziehen ermöglicht es, Start- oder Enddaten sowie die Dauer von Aufgaben einfach anzupassen.

Standardmäßig ist Drag-and-Drop aktiviert, sodass Benutzer Aufgaben entlang ihrer Zeilen in der Zeitleiste verschieben können.

Um das Drag-and-Drop-Verhalten anzupassen, können die folgenden Events verwendet werden:

  • onBeforeTaskDrag - um das Verschieben bestimmter Aufgaben zu blockieren
  • onTaskDrag - um den Verschiebebereich einzuschränken oder eigene Logik während des Ziehens anzuwenden
  • onAfterTaskDrag - um Aufgaben nach dem Verschieben zu verarbeiten

Hier sind einige typische Szenarien, in denen die Anpassung des Standard-Drag-Verhaltens sinnvoll ist:

  1. Blockieren des Verschiebens für bestimmte Aufgaben.
  2. Verhindern, dass Aufgaben außerhalb bestimmter Daten verschoben werden.
  3. Verschieben von untergeordneten Aufgaben zusammen mit ihrer übergeordneten Aufgabe.
  4. Verschieben von Projekten zusammen mit deren Unteraufgaben.
  5. Festlegen einer minimalen Aufgabendauer.
  6. Aktivieren des automatischen Bildlaufs beim Verschieben von Aufgaben.

Blockieren des Verschiebens für bestimmte Aufgaben​

Um das Verschieben bestimmter Aufgaben zu deaktivieren, nutzen Sie das Event onBeforeTaskDrag:

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

Verhindern, dass Aufgaben außerhalb bestimmter Daten verschoben werden​

Um zu verhindern, dass Aufgaben außerhalb eines bestimmten Datumsbereichs verschoben werden, verwenden Sie das Event onTaskDrag.

Das onTaskDrag-Event:

  • Wird jedes Mal ausgelöst, wenn der Benutzer die Maus bewegt, während er eine Aufgabe in der Zeitleiste verschiebt, die Größe ändert oder den Fortschritt aktualisiert.
  • Die Art der Drag-Aktion wird als zweites Argument übergeben - mode.
  • Alle möglichen Drag-Modi sind in der Eigenschaft drag_mode aufgeführt.

Kurz zusammengefasst läuft der Prozess wie folgt ab:

  1. Der Benutzer zieht die Aufgabe.
  2. dhtmlxGantt berechnet das Datum der Aufgabe basierend auf der neuen Position neu.
  3. dhtmlxGantt löst das Event onTaskDrag aus.
  4. dhtmlxGantt zeichnet die Aufgabe im Diagramm neu. Da das Event onTaskDrag nach der Neuberechnung ausgelöst wird, können Sie im Event-Handler eigene Werte für die verschobene Aufgabe festlegen, ohne befürchten zu müssen, dass diese überschrieben werden. So wird sichergestellt, dass die Aufgabe genau dort angezeigt wird, wo Sie es möchten.

Um beispielsweise zu verhindern, dass Benutzer Aufgaben außerhalb des Bereichs "31. März 2020 - 11. April 2020" verschieben:

custom_dnd

Können Sie diesen Code verwenden:

[Verschieben von Aufgaben außerhalb des Intervalls verweigern - [31.03.2020, 11.04.2020]](Verschieben von Aufgaben außerhalb des Intervalls verweigern - [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);
        }
    }
});

Drag parent task with its children

Verschieben von untergeordneten Aufgaben zusammen mit der übergeordneten Aufgabe​

Um das Verschieben von untergeordneten Aufgaben zu ermöglichen, wenn die übergeordnete Aufgabe verschoben wird, verwenden Sie das Event onTaskDrag (weitere Details zu diesem Event finden Sie 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 );
    }
});
// Rundet die Positionen der untergeordneten Aufgaben auf die aktuelle Skala
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 deren Unteraufgaben​

Hinweis

Dieses Feature ist nur in der Gantt PRO Edition verfügbar.

Standardmäßig können Aufgaben vom Typ Projekt nicht verschoben werden. Sie können das Verschieben von Projekten aktivieren, indem Sie die Option drag_project setzen:

gantt.config.drag_project = true;

Draggable projects

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

Es gibt verschiedene Ansätze, um Aufgaben gemeinsam mit ihren abhängigen Aufgaben zu verschieben. Detaillierte Informationen finden Sie in einem eigenen Artikel: Dragging Tasks Together with Their Dependent Tasks.

Festlegen einer minimalen Aufgabendauer​

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

Diese Option legt die kleinste erlaubte Aufgabengröße beim Ändern der Größe fest und verhindert, dass Aufgaben eine Dauer von Null haben.

Der Wert wird in Millisekunden angegeben:

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

//ODER

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

Automatischer Bildlauf beim Ziehen von Aufgaben​

Beim Arbeiten mit großen Gantt-Diagrammen kann das Ziehen einer Aufgabe über eine große Entfernung oder das Erstellen von Verbindungen zwischen weit entfernten Aufgaben schwierig sein.

Die Autoscroll-Funktion unterstützt Sie, indem das Diagramm während des Ziehens automatisch gescrollt wird. Sie ist standardmäßig aktiviert, kann aber über die Option autoscroll gesteuert werden.

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

Sie können die Geschwindigkeit des automatischen Bildlaufs in Millisekunden mit der Eigenschaft autoscroll_speed anpassen:

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

Deaktivieren der Größenänderung bestimmter Aufgaben​

Um zu verhindern, dass bestimmte Aufgaben in der Größe verändert werden, gibt es zwei Ansätze:

  1. Blenden Sie die Anfasser zur Größenänderung im UI per CSS aus. Nutzen Sie das Template task_class, um einer bestimmten Aufgabe eine eigene CSS-Klasse zuzuweisen:
gantt.templates.task_class = function(start, end, task){
    if(task.no_resize) { // no_resize ist eine benutzerdefinierte Eigenschaft zur Demonstration
        return "no_resize";
    }
    return "";

Blenden Sie dann die Anfasser mit folgendem CSS aus:

.no_resize .gantt_task_drag{
   display: none !important;
}
  1. Blockieren Sie die Größenänderung programmatisch mit dem onBeforeTaskDrag Event. Wird false vom Handler zurückgegeben, wird die Größenänderung verhindert:
gantt.attachEvent("onBeforeTaskDrag", function(id, mode, e){
    if(mode === "resize" && gantt.getTask(id).no_resize){
        return false;
    }
    return true;
});

Erkennen, welche Seite einer Aufgabe in der Größe verändert wird​

Der "resize"-Modus beim Drag-and-Drop bedeutet, dass der Benutzer entweder das Start- oder das Enddatum einer Aufgabe ändert.

Um zu erkennen, welches Datum geändert wird, prüfen Sie das Flag gantt.getState().drag_from_start:

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

Deaktivieren der Größenänderung des Start- oder Enddatums einer Aufgabe​

Die Anfasser zur Größenänderung können mit folgenden Selektoren angesprochen werden:

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

Um die Größenänderung des Startdatums zu deaktivieren, verwenden Sie dieses CSS:

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

Ebenso können Sie die Größenänderung des Enddatums deaktivieren:

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

Alternativ können Sie die Größenänderung über das onBeforeTaskDrag Event blockieren. Wird false vom Handler zurückgegeben, wird die Größenänderung verhindert:

gantt.attachEvent("onBeforeTaskDrag", function(id, mode, e){
    if(mode === "resize"){
        if(gantt.getState().drag_from_start === true) {
             return false;
        } else {
             // Das Ändern des Enddatums ist erlaubt
        }
    }
    return true;
});