clickDrag Расширение

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

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

Чтобы включить расширенные функции drag-and-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) - структура аналогична startPoint и представляет конечную позицию drag'а
    • absolute - (object) - координаты относительно левого верхнего угла документа
      • left - (number) - горизонтальная позиция
      • top - (number) - вертикальная позиция
    • relative - (object) - координаты относительно элемента viewPort
      • left - (number) - горизонтальная позиция
      • top - (number) - вертикальная позиция
  • startDate? - (Date) - дата, соответствующая startPoint
  • endDate? - (Date) - дата, соответствующая endPoint
  • tasksBetweenDates? - (Array<Task>) - задачи, попадающие между начальной и конечной датой
  • tasksInRows? - (Array<Task>) - задачи, выделенные вертикально между стартовыми и конечными координатами
• singleRow? - (boolean) - если true, выделение ограничено одной строкой по высоте задачи
• ignore? - (string) - CSS-селектор для элементов, которые не должны активировать drag-and-drop
• useKey? - (string | boolean) - drag-and-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) - структура аналогична startPoint, представляет текущую позицию drag'а
    • absolute - (object) - координаты относительно документа
      • left - (number) - горизонтальная позиция
      • top - (number) - вертикальная позиция
    • relative - (object) - координаты относительно элемента viewPort
      • left - (number) - горизонтальная позиция
      • top - (number) - вертикальная позиция

События

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

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

К началу