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)
Back to top