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
render - (function) a function that creates an element rendered during dragging. Takes two parameters:
- startPoint - (object) - an object of the type:
  {absolute: {left: number, top: number}, relative: {left: number, top: number} },
  where absolute - the coordinates of the left top corner of the document, and relative - the coordinates of the left top element used as a viewPort
- endPoint - (object) an object of the type:
  {absolute: {left: number, top: number}, relative: {left: number, top: number} },
  where absolute - the coordinates of the left top corner of the document, and relative - the coordinates of the left top element used as a viewPort
viewPort - (HTMLElement) the element to attach an event to and select
useRequestAnimationFrame - (boolean) defines whether requestAnimationFrame is used during rendering
callback - (function) - a function that will be called when the mouse button is released. Takes 6 parameters:
- startPoint - (object) - an object of the type:
  {absolute: {left: number, top: number}, relative: {left: number, top: number} },
  where absolute - the coordinates of the left top corner of the document, and relative - the coordinates of the left top element used as a viewPort
- endPoint - (object) an object of the type:
  {absolute: {left: number, top: number}, relative: {left: number, top: number} },
  where absolute - the coordinates of the left top corner of the document, and relative - the coordinates of the left top element used as a viewPort
- startDate - (Date) the date that corresponds to the starting point
- endDate - (Date) the date that corresponds to the ending point
- tasksBetweenDates - (array) an array of tasks between the start and end date points
- tasksInRows - (array) 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

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)