clickDrag Расширение

Подробную информацию о расширении clickDrag можно найти в статье Создание или выбор задач с помощью перетаскивания.

Объект Конфигурации

Чтобы настроить расширенные функции перетаскивания, используйте опцию конфигурации click_drag и включите необходимые свойства из списка ниже в его объект:

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

• className? - (string) - позволяет определить пользовательский CSS класс для выбранного элемента.
• viewPort? - (HTMLElement) - указывает элемент, к которому нужно прикрепить событие и выбрать.
• useRequestAnimationFrame? - (boolean) - определяет, используется ли requestAnimationFrame во время рендеринга.
• callback? (startPoint, endPoint, startDate, endDate, tasksBetweenDates, tasksInRows): any - функция, вызываемая при отпускании кнопки мыши. Она принимает шесть параметров:
  • startPoint? - (object) - включает:
    • absolute - (object) - координаты верхнего левого угла документа:
      • left - (number) - левая координата.
      • top - (number) - верхняя координата.
    • relative - (object) - координаты относительно верхнего левого угла элемента, используемого как viewPort:
      • left - (number) - левая координата.
      • top - (number) - верхняя координата.
  • endPoint? - (object) - включает:
    • absolute - (object) - координаты верхнего левого угла документа:
      • left - (number) - левая координата.
      • top - (number) - верхняя координата.
    • relative - (object) - координаты относительно верхнего левого угла элемента, используемого как viewPort:
      • left - (number) - левая координата.
      • top - (number) - верхняя координата.
  • startDate? - (Date) - дата, соответствующая начальной точке.
  • endDate? - (Date) - дата, соответствующая конечной точке.
  • tasksBetweenDates? - (Array<Task>) - массив задач, расположенных между начальной и конечной датами.
  • tasksInRows? - (Array<Task>) - массив задач, выбранных в вертикальном диапазоне, определенном начальными и конечными координатами.
• singleRow? - (boolean) - если установлено в true, ограничивает выбор одной строкой, совпадающей с высотой задачи.
• ignore? - (string) - CSS селектор, который предотвращает перетаскивание для элементов, соответствующих селектору.
• useKey? - (string | boolean) - включает перетаскивание только при нажатии определенной клавиши-модификатора. Поддерживаемые значения включают "ctrlKey", "shiftKey", "metaKey" и "altKey".
• render? (startPoint, endPoint): any - функция для создания элемента отображения во время перетаскивания. Она принимает два параметра:
  • startPoint? - (object) - включает:
    • absolute - (object) - координаты верхнего левого угла документа:
      • left - (number) - левая координата.
      • top - (number) - верхняя координата.
    • relative - (object) - координаты относительно верхнего левого угла элемента, используемого как viewPort:
      • left - (number) - левая координата.
      • top - (number) - верхняя координата.
  • endPoint? - (object) - включает:
    • absolute - (object) - координаты верхнего левого угла документа:
      • left - (number) - левая координата.
      • top - (number) - верхняя координата.
    • relative - (object) - координаты относительно верхнего левого угла элемента, используемого как viewPort:
      • left - (number) - левая координата.
      • top - (number) - верхняя координата.

События

Следующие события могут быть прикреплены к элементу, указанному как viewPort (по умолчанию это gantt.$task_data, который является временной шкалой с панелями задач):

• onBeforeDrag - вызывается после нажатия кнопки мыши, но до начала перетаскивания.
• onDrag - вызывается многократно после начала перетаскивания, но до отпускания кнопки мыши.
• onBeforeDragEnd - вызывается при отпускании кнопки мыши, но до удаления отображаемого элемента и определения задач под выделением.
• onDragEnd - вызывается после удаления отображаемого элемента и определения задач под выделением, но до выполнения функции callback (если она есть).

К началу