click_drag

включает расширенный drag-n-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: "Новая задача",
            start_date: gantt.roundDate(startDate),
            end_date: gantt.roundDate(endDate)
        }, parentId);
 
    },
    singleRow: true
};

Default value:

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

Расширение click_drag позволяет:

• создавать задачи с помощью drag-n-drop
• устанавливать время для незапланированных задач с помощью drag-n-drop
• выбирать задачи с помощью drag-n-drop
• создавать части разделенных задач с помощью drag-n-drop (PRO версия)

Объект gantt.config.click_drag включает следующие свойства:

• className - (string) устанавливает пользовательский CSS класс для выбранного элемента
• viewPort - (HTMLElement) элемент, к которому будет прикреплено событие и который будет выбран
• useRequestAnimationFrame - (boolean) определяет, используется ли requestAnimationFrame во время рендеринга
• callback - (function) - функция, которая будет вызвана при отпускании кнопки мыши. Принимает 6 параметров:
  • startPoint - (object) - объект следующего типа:
    {absolute: {left: number, top: number}, relative: {left: number, top: number} },
    где absolute - координаты верхнего левого угла документа, а relative - координаты верхнего левого элемента, используемого как viewPort
  • endPoint - (object) объект следующего типа:
    {absolute: {left: number, top: number}, relative: {left: number, top: number} },
    где absolute - координаты верхнего левого угла документа, а relative - координаты верхнего левого элемента, используемого как viewPort
  • startDate - (Date) дата, соответствующая начальной точке
  • endDate - (Date) дата, соответствующая конечной точке
  • tasksBetweenDates - (array) массив задач между начальной и конечной датами
  • tasksInRows - (array) массив задач, выбранных между начальной и конечной координатами по вертикали
• singleRow - (boolean) true, чтобы добавить выбор только в одной строке, равной высоте задачи
• ignore - (string) CSS селектор. Drag-n-drop не будет активирован для элементов, соответствующих селектору
• useKey - (string|boolean) если свойство указано, drag-n-drop будет активирован только при нажатии указанной модификаторной клавиши. Поддерживаемые значения: "ctrlKey", "shiftKey", "metaKey", "altKey"

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

• render - (function) функция, которая создает элемент, отображаемый во время перетаскивания. Принимает два параметра:
  • startPoint - (object) - объект следующего типа:
    {absolute: {left: number, top: number}, relative: {left: number, top: number} },
    где absolute - координаты верхнего левого угла документа, а relative - координаты верхнего левого элемента, используемого как viewPort
  • endPoint - (object) объект следующего типа:
    {absolute: {left: number, top: number}, relative: {left: number, top: number} },
    где absolute - координаты верхнего левого угла документа, а relative - координаты верхнего левого элемента, используемого как viewPort

Вот пример использования функции render:

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

К началу