clickDrag Extension

Read details about the clickDrag extension in the article Creating/Selecting Tasks with DnD.

Configuration object

To enable advanced drag-n-drop, specify the click_drag configuration option and set the necessary properties from the list below inside its object:

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

className? - (string) - sets a custom CSS class for a selected element
viewPort? - (HTMLElement) - the element to attach an event to and select
useRequestAnimationFrame? - (boolean) - defines whether requestAnimationFrame is used during rendering
callback? (startPoint, endPoint, startDate, endDate, tasksBetweenDates, tasksInRows): any - a function that will be called when the mouse button is released. Takes 6 parameters:
- startPoint? - (object) - an object with the following attributes:
  - absolute - (object) - the coordinates of the left top corner of the document
    - left - (number) - the left coordinate
    - top - (number) - the top coordinate
  - relative - (object) - the coordinates of the left top element used as a viewPort
    - left - (number) - the left coordinate
    - top - (number) - the top coordinate
- endPoint? - (object) - an object with the following attributes:
  - absolute - (object) - the coordinates of the left top corner of the document
    - left - (number) - the left coordinate
    - top - (number) - the top coordinate
  - relative - (object) - the coordinates of the left top element used as a viewPort
    - left - (number) - the left coordinate
    - top - (number) - the top coordinate
- startDate? - (Date) - the date that corresponds to the starting point
- endDate? - (Date) - the date that corresponds to the ending point
- tasksBetweenDates? - (Array<Task>) - an array of tasks between the start and end date points
- tasksInRows? - (Array<Task>) - an array of tasks selected between the start and end coordinates vertically
singleRow? - (boolean) - true to add selection only in one row equal to the height of a task
ignore? - (string) - CSS selector. Drag-n-drop won't be activated for the elements that match the selector
useKey? - (string | boolean) - if the property is specified, drag-n-drop will be activated only when the specified modifier key is pressed. Supported values: "ctrlKey", "shiftKey", "metaKey", "altKey"
render? (startPoint, endPoint): any - a function that creates an element rendered during dragging. Takes two parameters:
- startPoint? - (object) - an object with the attributes:
  - absolute - (object) - the coordinates of the left top corner of the document
    - left - (number) - the left coordinate
    - top - (number) - the top coordinate
  - relative - (object) - the coordinates of the left top element used as a viewPort
    - left - (number) - the left coordinate
    - top - (number) - the top coordinate
- endPoint? - (object) - an object with the attributes:
  - absolute - (object) - the coordinates of the left top corner of the document
    - left - (number) - the left coordinate
    - top - (number) - the top coordinate
  - relative - (object) - the coordinates of the left top element used as a viewPort
    - left - (number) - the left coordinate
    - top - (number) - the top coordinate

Events

You can attach the following events to the element passed as a viewPort (gantt.$task_data by default - a part of the timeline with task bars):

onBeforeDrag - fires after pressing the mouse button before starting to drag
onDrag - fires each time after dragging is started but before the mouse button is released
onBeforeDragEnd - fires after releasing the mouse button but before the rendered element is deleted and tasks that come under selection are searched for
onDragEnd - fires after removing a rendered element and finding tasks that come under selection but before calling the callback function (if specified)