Расширение clickDrag

Подробнее об расширении clickDrag можно узнать в статье Создание/Выбор задач с DnD.

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

Чтобы включить расширенное drag-n-drop, укажите конфигурационный параметр 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 - функция, которая будет вызываться после отпускания кнопки мыши. Принимает 6 параметров:
  • 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-селектор. Drag-n-drop не будет активировано для элементов, которые соответствуют селектору
• useKey? - (string | boolean) - если свойство указано, drag-n-drop будет активирован только при нажатии указанной клавиши-модификатора. Поддерживаемые значения: "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 - вызывается после удаления отрисованного элемента и нахождения задач, попадающих под выделение, но перед вызовом функции обратного вызова (если она задана)