clickDrag-Erweiterung

Lesen Sie Details zur clickDrag-Erweiterung im Artikel Creating/Selecting Tasks with DnD.

Konfigurationsobjekt

Um fortgeschrittenes Drag-and-Drop zu aktivieren, geben Sie die Konfigurationsoption click_drag an und setzen die erforderlichen Eigenschaften aus der untenstehenden Liste innerhalb seines Objekts:

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

• className? - (string) - legt eine benutzerdefinierte CSS-Klasse für ein ausgewähltes Element fest
• viewPort? - (HTMLElement) - das Element, an das ein Ereignis angehängt wird und das als ViewPort verwendet wird
• useRequestAnimationFrame? - (boolean) - definiert, ob während des Renderings requestAnimationFrame verwendet wird
• callback? (startPoint, endPoint, startDate, endDate, tasksBetweenDates, tasksInRows): any - eine Funktion, die aufgerufen wird, wenn die Maustaste losgelassen wird. Nimmt 6 Parameter entgegen:
  • startPoint? - (object) - ein Objekt mit den folgenden Attributen:
    • absolute - (object) - die Koordinaten der linken oberen Ecke des Dokuments
      • left - (number) - die linke Koordinate
      • top - (number) - die obere Koordinate
    • relative - (object) - die Koordinaten des linken oberen Elements, das als ViewPort verwendet wird
      • left - (number) - die linke Koordinate
      • top - (number) - die obere Koordinate
  • endPoint? - (object) - ein Objekt mit den Attributen:
    • absolute - (object) - die Koordinaten der linken oberen Ecke des Dokuments
      • left - (number) - die linke Koordinate
      • top - (number) - die obere Koordinate
    • relative - (object) - die Koordinaten des linken oberen Elements, das als ViewPort verwendet wird
      • 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 Tasks zwischen dem Start- und Enddatum
  • tasksInRows? - (Array<Task>) - ein Array von Tasks, die vertikal zwischen Start- und Endkoordinaten ausgewählt sind
• singleRow? - (boolean) - true, um die Auswahl nur in einer Zeile zu ermöglichen, die der Höhe einer Aufgabe entspricht
• ignore? - (string) - CSS-Selektor. Drag-n-drop wird für Elemente, die dem Selektor entsprechen, nicht aktiviert
• useKey? - (string | boolean) - falls die Eigenschaft angegeben ist, wird Drag-n-drop nur aktiviert, wenn die angegebene Modifikatortaste gedrückt wird. Unterstützte Werte: "ctrlKey", "shiftKey", "metaKey", "altKey"
• render? (startPoint, endPoint): any - eine Funktion, die ein während des Dragens gerendertes Element erzeugt. Nimmt zwei Parameter entgegen:
  • startPoint? - (object) - ein Objekt mit den Attributen:
    • absolute - (object) - die Koordinaten der linken oberen Ecke des Dokuments
      • left - (number) - die linke Koordinate
      • top - (number) - die obere Koordinate
    • relative - (object) - die Koordinaten des linken oberen Elements, das als ViewPort verwendet wird
      • left - (number) - die linke Koordinate
      • top - (number) - die obere Koordinate
  • endPoint? - (object) - ein Objekt mit den Attributen:
    • absolute - (object) - die Koordinaten der linken oberen Ecke des Dokuments
      • left - (number) - die linke Koordinate
      • top - (number) - die obere Koordinate
    • relative - (object) - die Koordinaten des linken oberen Elements, das als ViewPort verwendet wird
      • left - (number) - die linke Koordinate
      • top - (number) - die obere Koordinate

Ereignisse

Sie können die folgenden Ereignisse an das Element anhängen, das als ViewPort übergeben wird (standardmäßig gantt.$task_data – ein Teil der Timeline mit Aufgabenbalken):

• onBeforeDrag - löst aus, nachdem die Maustaste gedrückt wurde, bevor das Ziehen beginnt
• onDrag - löst aus, jedes Mal nachdem das Ziehen gestartet wurde, aber bevor die Maustaste losgelassen wird
• onBeforeDragEnd - löst aus, nachdem die Maustaste losgelassen wurde, aber bevor das gerenderte Element gelöscht wird und die Aufgaben unter der Auswahl gesucht werden
• onDragEnd - löst aus, nachdem das gerenderte Element entfernt und Aufgaben unter der Auswahl gefunden wurden, aber bevor der Callback aufgerufen wird (falls angegeben)