click_drag

ermöglicht erweitertes Drag-and-Drop

Example

gantt.config.click_drag = {
    callback: function(
        startPosition,
        endPosition,
        startDate,
        endDate,
        tasksBetween,
        rowsBetween
    ){
        var parentId = gantt.config.root_id;
        if(rowsBetween.length){
            parentId = rowsBetween[0].id;
        }
 
        gantt.createTask({
            text: "Neue Aufgabe",
            start_date: gantt.roundDate(startDate),
            end_date: gantt.roundDate(endDate)
        }, parentId);
 
    },
    singleRow: true
};

Default value:

{ useKey: false, ignore: ".gantt_task_line, .gantt_task_link" }

Die click_drag Erweiterung ermöglicht:

• Erstellen von Aufgaben mit Drag-and-Drop
• Festlegen von Zeiten für nicht terminierte Aufgaben mit Drag-and-Drop
• Auswählen von Aufgaben mit Drag-and-Drop
• Erstellen von Teilen gesplitteter Aufgaben mit Drag-and-Drop (PRO-Version)

Das gantt.config.click_drag Objekt enthält die folgenden Eigenschaften:

• className - (string) setzt eine benutzerdefinierte CSS-Klasse für ein ausgewähltes Element
• viewPort - (HTMLElement) das Element, an das ein Ereignis angehängt wird und das ausgewählt wird
• useRequestAnimationFrame - (boolean) definiert, ob requestAnimationFrame während des Renderings verwendet wird
• callback - (function) - eine Funktion, die aufgerufen wird, wenn die Maustaste losgelassen wird. Sie nimmt 6 Parameter:
  • startPoint - (object) - ein Objekt des Typs:
    {absolute: {left: number, top: number}, relative: {left: number, top: number} },
    wobei absolute - die Koordinaten der oberen linken Ecke des Dokuments sind, und relative - die Koordinaten des oberen linken Elements, das als viewPort verwendet wird
  • endPoint - (object) ein Objekt des Typs:
    {absolute: {left: number, top: number}, relative: {left: number, top: number} },
    wobei absolute - die Koordinaten der oberen linken Ecke des Dokuments sind, und relative - die Koordinaten des oberen linken Elements, das als viewPort verwendet wird
  • startDate - (Date) das Datum, das dem Startpunkt entspricht
  • endDate - (Date) das Datum, das dem Endpunkt entspricht
  • tasksBetweenDates - (array) ein Array von Aufgaben zwischen den Start- und Enddatumspunkten
  • tasksInRows - (array) ein Array von Aufgaben, die zwischen den Start- und Endkoordinaten vertikal ausgewählt werden
• singleRow - (boolean) true, um die Auswahl nur in einer Zeile hinzuzufügen, die der Höhe einer Aufgabe entspricht
• ignore - (string) CSS-Selektor. Drag-and-Drop wird nicht für die Elemente aktiviert, die dem Selektor entsprechen
• useKey - (string|boolean) wenn die Eigenschaft angegeben ist, wird Drag-and-Drop nur aktiviert, wenn die angegebene Modifikatortaste gedrückt wird. Unterstützte Werte: "ctrlKey", "shiftKey", "metaKey", "altKey"

gantt.config.click_drag = {
    callback: onDragEnd,
    ignore: ".gantt_task_line, .gantt_marker_content, .gantt_task_link",
    useKey: "ctrlKey"
};

• render - (function) eine Funktion, die ein Element erstellt, das während des Drag-and-Drop gerendert wird. Sie nimmt zwei Parameter:
  • startPoint - (object) - ein Objekt des Typs:
    {absolute: {left: number, top: number}, relative: {left: number, top: number} },
    wobei absolute - die Koordinaten der oberen linken Ecke des Dokuments sind, und relative - die Koordinaten des oberen linken Elements, das als viewPort verwendet wird
  • endPoint - (object) ein Objekt des Typs:
    {absolute: {left: number, top: number}, relative: {left: number, top: number} },
    wobei absolute - die Koordinaten der oberen linken Ecke des Dokuments sind, und relative - die Koordinaten des oberen linken Elements, das als viewPort verwendet wird

Hier ist ein Beispiel für die Verwendung der render Funktion:

var node;
gantt.config.click_drag = {
    callback: onDragEnd,
    singleRow: true,
    render: function(start, end){
        if(!(node && node.parentNode)){
            node = document.createElement("div");
        }
        var left = Math.min(start.relative.left, end.relative.left);
 
        node.style.top = (start.relative.top - gantt.config.row_height) + "px";
        node.style.left = left + "px";
        node.style.width = Math.abs(start.relative.left - end.relative.left) + "px";
        node.style.height = gantt.config.row_height + "px";
        node.style.position = "absolute";
        return node;
    }
};

Zurück nach oben