clickDrag Erweiterung

Weitere Informationen zur clickDrag-Erweiterung finden Sie im Artikel Erstellen/Auswählen von Aufgaben mit Drag-and-Drop.

Konfigurationsobjekt

Um die erweiterte Drag-and-Drop-Funktionalität zu aktivieren, setzen Sie die Konfigurationsoption click_drag und fügen Sie die gewünschten Eigenschaften aus der untenstehenden Liste in das Objekt ein:

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

• className? - (string) - wendet eine benutzerdefinierte CSS-Klasse auf das ausgewählte Element an
• viewPort? - (HTMLElement) - das Element, an das das Ereignis gebunden wird und in dem die Auswahl erfolgt
• useRequestAnimationFrame? - (boolean) - legt fest, ob requestAnimationFrame während des Renderings verwendet wird
• callback? (startPoint, endPoint, startDate, endDate, tasksBetweenDates, tasksInRows): any - eine Funktion, die ausgelöst wird, wenn die Maustaste losgelassen wird. Sie erhält 6 Parameter:
  • startPoint? - (object) - enthält die folgenden Eigenschaften:
    • absolute - (object) - Koordinaten relativ zur oberen linken Ecke des Dokuments
      • left - (number) - horizontale Position
      • top - (number) - vertikale Position
    • relative - (object) - Koordinaten relativ zur oberen linken Ecke des viewPort-Elements
      • left - (number) - horizontale Position
      • top - (number) - vertikale Position
  • endPoint? - (object) - strukturiert wie startPoint, stellt das Ende des Ziehvorgangs dar
    • absolute - (object) - Koordinaten relativ zur oberen linken Ecke des Dokuments
      • left - (number) - horizontale Position
      • top - (number) - vertikale Position
    • relative - (object) - Koordinaten relativ zum viewPort-Element
      • left - (number) - horizontale Position
      • top - (number) - vertikale Position
  • startDate? - (Date) - das Datum, das dem startPoint entspricht
  • endDate? - (Date) - das Datum, das dem endPoint entspricht
  • tasksBetweenDates? - (Array<Task>) - Aufgaben, die zwischen dem Start- und Enddatum liegen
  • tasksInRows? - (Array<Task>) - Aufgaben, die vertikal zwischen den Start- und Endkoordinaten ausgewählt wurden
• singleRow? - (boolean) - wenn true, ist die Auswahl auf eine einzelne Zeile mit der Höhe einer Aufgabe beschränkt
• ignore? - (string) - CSS-Selektor für Elemente, bei denen Drag-and-Drop nicht aktiviert werden soll
• useKey? - (string | boolean) - Drag-and-Drop wird nur aktiviert, wenn die angegebene Modifikatortaste gedrückt gehalten wird. Unterstützte Tasten: "ctrlKey", "shiftKey", "metaKey", "altKey"
• render? (startPoint, endPoint): any - eine Funktion, die das während des Ziehvorgangs angezeigte Element zurückgibt. Sie akzeptiert zwei Parameter:
  • startPoint? - (object) - enthält:
    • absolute - (object) - Koordinaten relativ zur oberen linken Ecke des Dokuments
      • left - (number) - horizontale Position
      • top - (number) - vertikale Position
    • relative - (object) - Koordinaten relativ zum viewPort-Element
      • left - (number) - horizontale Position
      • top - (number) - vertikale Position
  • endPoint? - (object) - strukturiert wie startPoint, stellt die aktuelle Position des Ziehvorgangs dar
    • absolute - (object) - Koordinaten relativ zum Dokument
      • left - (number) - horizontale Position
      • top - (number) - vertikale Position
    • relative - (object) - Koordinaten relativ zum viewPort-Element
      • left - (number) - horizontale Position
      • top - (number) - vertikale Position

Ereignisse

Die folgenden Ereignisse können an das als viewPort verwendete Element gebunden werden (standardmäßig gantt.$task_data, der Bereich der Zeitleiste, der die Aufgabenbalken enthält):

• onBeforeDrag - wird direkt nach dem Drücken der Maustaste ausgelöst, bevor das Ziehen beginnt
• onDrag - wird wiederholt während des Ziehens ausgelöst, bevor die Maustaste losgelassen wird
• onBeforeDragEnd - wird ausgelöst, nachdem die Maustaste losgelassen wurde, aber bevor das Ziehelement entfernt und die Aufgaben unter der Auswahl identifiziert werden
• onDragEnd - wird ausgelöst, nachdem das Ziehelement entfernt und die Aufgaben innerhalb der Auswahl gefunden wurden, aber bevor die callback-Funktion (sofern angegeben) aufgerufen wird

Zurück nach oben