Erstellen oder Auswählen von Aufgaben mit Drag-and-Drop

Die dhtmlxGantt-Bibliothek enthält eine Erweiterung, die die Drag-and-Drop-Funktionen beim Arbeiten mit Aufgaben auf der Zeitleiste verbessert.

Die click_drag-Erweiterung ist dafür konzipiert:

Aufgaben mit Drag-and-Drop erstellen
Zeit für nicht geplante Aufgaben mit Drag-and-Drop festlegen
Aufgaben mit Drag-and-Drop auswählen
Teile von geteilten Aufgaben mit Drag-and-Drop erstellen (verfügbar in der PRO-Version)

Um diese Erweiterung zu verwenden, aktivieren Sie das click_drag Plugin über die gantt.plugins Methode.

Um erweitertes Drag-and-Drop zu aktivieren, konfigurieren Sie die gantt.config.click_drag Option und definieren Sie die gewünschten Eigenschaften aus der untenstehenden Liste innerhalb ihres Objekts:

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

Verfügbare Eigenschaften

className - (string) Weist dem ausgewählten Element eine benutzerdefinierte CSS-Klasse zu.
render - (function) Eine Funktion zum Erstellen eines Elements, das während des Ziehens erscheint. Akzeptiert zwei Parameter:
- startPoint - (object) Ein Objekt, das wie folgt strukturiert ist:
  {absolute: {left: number, top: number}, relative: {left: number, top: number}},
  wobei absolute sich auf die Koordinaten der oberen linken Ecke des Dokuments bezieht und relative die Koordinaten relativ zum Viewport-Element darstellt.
- endPoint - (object) Ähnlich wie startPoint, strukturiert als:
  {absolute: {left: number, top: number}, relative: {left: number, top: number}}.
viewPort - (HTMLElement) Das Element, an das Ereignisse angehängt und ausgewählt werden.
useRequestAnimationFrame - (boolean) Bestimmt, ob requestAnimationFrame während des Renderings verwendet wird.
callback - (function) Eine Funktion, die ausgelöst wird, wenn die Maustaste losgelassen wird. Akzeptiert sechs Parameter:
- startPoint - (object) Gleiche Struktur wie oben.
- endPoint - (object) Gleiche Struktur wie oben.
- startDate - (Date) Das Datum, das dem Startpunkt entspricht.
- endDate - (Date) Das Datum, das dem Endpunkt entspricht.
- tasksBetweenDates - (array) Eine Liste von Aufgaben zwischen den Start- und Enddatumspunkten.
- tasksInRows - (array) Eine Liste von Aufgaben, die zwischen den vertikalen Start- und Endkoordinaten ausgewählt wurden.
singleRow - (boolean) Wenn true, wird die Auswahl auf eine einzige Zeile beschränkt, die der Aufgabenhöhe entspricht.

Ereignisse für Drag-and-Drop

Sie können die folgenden Ereignisse an das Element anhängen, das als viewPort verwendet wird (standardmäßig gantt.$task_data, welches der Zeitachsenabschnitt mit den Aufgabenbalken ist):

onBeforeDrag - Wird ausgelöst, nachdem die Maustaste gedrückt wurde, aber bevor das Ziehen beginnt.
onDrag - Wird wiederholt ausgelöst, nachdem das Ziehen beginnt und bevor die Maustaste losgelassen wird.
onBeforeDragEnd - Wird ausgelöst, nachdem die Maustaste losgelassen wird, aber bevor das gerenderte Element entfernt und die Aufgaben unter der Auswahl identifiziert werden.
onDragEnd - Wird ausgelöst, nachdem das gerenderte Element entfernt und die Aufgaben unter der Auswahl identifiziert wurden, aber bevor die callback Funktion (falls definiert) ausgeführt wird.

Erstellen von Aufgaben mit Drag-and-Drop

Aufgaben können direkt auf der Zeitleiste erstellt werden, indem Sie auf einen leeren Bereich klicken, um das Startdatum der Aufgabe festzulegen, und nach rechts ziehen, um die Dauer zu bestimmen.

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: "Unteraufgabe von " + parent.text,
            start_date: gantt.roundDate(startDate),
            end_date: gantt.roundDate(endDate)
        }, parent.id);
    } else if (tasksInRow.length === 0) {
        gantt.createTask({
            text: "Neue Aufgabe",
            start_date: gantt.roundDate(startDate),
            end_date: gantt.roundDate(endDate)
        });
    }
}

Festlegen der Zeit für nicht geplante Aufgaben

Mit der click_drag-Erweiterung können Sie Zeit für nicht geplante Aufgaben mit Drag-and-Drop zuweisen.

Auswählen von Aufgaben mit Drag-and-Drop

Aufgaben können in verschiedenen Modi mit Drag-and-Drop ausgewählt werden, z. B. nach Datum, nach Zeilen oder innerhalb von Grenzen.

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;
    }
}

Erstellen von Teilen von geteilten Aufgaben

Die Drag-and-Drop-Funktion unterstützt auch das Erstellen von Teilen von geteilten Aufgaben.

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: "Unteraufgabe von " + currentTask.text,
                start_date: gantt.roundDate(startDate),
                end_date: gantt.roundDate(endDate)
            }, currentTask.id);
        } else {
            var projectName = "neues Projekt " + 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: "Unteraufgabe von " + projectName,
                start_date: gantt.roundDate(startDate),
                end_date: gantt.roundDate(endDate)
            }, newProject);
            gantt.calculateTaskLevel(newTask);
        }
    } else if (tasksInRow.length === 0) {
        gantt.createTask({
            text: "Neue Aufgabe",
            start_date: gantt.roundDate(startDate),
            end_date: gantt.roundDate(endDate)
        });
    }
}

Zurück nach oben