clickDrag-Erweiterung

Ausführliche Informationen über die clickDrag-Erweiterung finden Sie im Artikel Erstellen oder Auswählen von Aufgaben mit Drag-and-Drop.

Konfigurationsobjekt

Um erweiterte Drag-and-Drop-Funktionalität einzurichten, verwenden Sie die click_drag Konfigurationsoption und fügen Sie die erforderlichen Eigenschaften aus der unten stehenden Liste in ihr Objekt ein:

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

• className? - (string) - ermöglicht es Ihnen, eine benutzerdefinierte CSS-Klasse für das ausgewählte Element zu definieren.
• viewPort? - (HTMLElement) - spezifiziert das Element, an das das Ereignis angehängt und ausgewählt werden soll.
• useRequestAnimationFrame? - (boolean) - bestimmt, 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 nimmt sechs Parameter entgegen:
  • startPoint? - (object) - enthält:
    • absolute - (object) - die Koordinaten der oberen linken Ecke des Dokuments:
      • left - (number) - die linke Koordinate.
      • top - (number) - die obere Koordinate.
    • relative - (object) - die Koordinaten relativ zur oberen linken Ecke des als viewPort verwendeten Elements:
      • left - (number) - die linke Koordinate.
      • top - (number) - die obere Koordinate.
  • endPoint? - (object) - enthält:
    • absolute - (object) - die Koordinaten der oberen linken Ecke des Dokuments:
      • left - (number) - die linke Koordinate.
      • top - (number) - die obere Koordinate.
    • relative - (object) - die Koordinaten relativ zur oberen linken Ecke des als viewPort verwendeten Elements:
      • left - (number) - die linke Koordinate.
      • top - (number) - die obere Koordinate.
  • startDate? - (Date) - das Datum, das dem Startpunkt entspricht.
  • endDate? - (Date) - das Datum, das dem Endpunkt entspricht.
  • tasksBetweenDates? - (Array<Task>) - ein Array von Aufgaben, die sich zwischen den Start- und Enddatumspunkten befinden.
  • tasksInRows? - (Array<Task>) - ein Array von Aufgaben, die innerhalb des durch die Start- und Endkoordinaten definierten vertikalen Bereichs ausgewählt wurden.
• singleRow? - (boolean) - wenn auf true gesetzt, wird die Auswahl auf eine einzelne Zeile beschränkt, die der Höhe einer Aufgabe entspricht.
• ignore? - (string) - ein CSS-Selektor, der Drag-and-Drop für Elemente verhindert, die dem Selektor entsprechen.
• useKey? - (string | boolean) - aktiviert Drag-and-Drop nur, wenn eine bestimmte Modifikatortaste gedrückt wird. Unterstützte Werte sind "ctrlKey", "shiftKey", "metaKey" und "altKey".
• render? (startPoint, endPoint): any - eine Funktion zum Erstellen eines Elements, das während des Ziehens angezeigt wird. Sie nimmt zwei Parameter entgegen:
  • startPoint? - (object) - enthält:
    • absolute - (object) - die Koordinaten der oberen linken Ecke des Dokuments:
      • left - (number) - die linke Koordinate.
      • top - (number) - die obere Koordinate.
    • relative - (object) - die Koordinaten relativ zur oberen linken Ecke des als viewPort verwendeten Elements:
      • left - (number) - die linke Koordinate.
      • top - (number) - die obere Koordinate.
  • endPoint? - (object) - enthält:
    • absolute - (object) - die Koordinaten der oberen linken Ecke des Dokuments:
      • left - (number) - die linke Koordinate.
      • top - (number) - die obere Koordinate.
    • relative - (object) - die Koordinaten relativ zur oberen linken Ecke des als viewPort verwendeten Elements:
      • left - (number) - die linke Koordinate.
      • top - (number) - die obere Koordinate.

Ereignisse

Die folgenden Ereignisse können an das als viewPort spezifizierte Element angehängt werden (standardmäßig gantt.$task_data, das ist der Zeitachsenbereich mit den Aufgabenbalken):

• onBeforeDrag - wird ausgelöst, nachdem die Maustaste gedrückt wurde, aber bevor das Ziehen beginnt.
• onDrag - wird wiederholt ausgelöst, nachdem das Ziehen begonnen hat, aber bevor die Maustaste losgelassen wird.
• onBeforeDragEnd - wird ausgelöst, wenn 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 vorhanden) ausgeführt wird.

Zurück nach oben