고급 드래그 앤 드롭 활성화
gantt.config.click_drag = {
callback: function(
startPosition,
endPosition,
startDate,
endDate,
tasksBetween,
rowsBetween
){
var parentId = gantt.config.root_id;
if(rowsBetween.length){
parentId = rowsBetween[0].id;
}
gantt.createTask({
text: "New task",
start_date: gantt.roundDate(startDate),
end_date: gantt.roundDate(endDate)
}, parentId);
},
singleRow: true
};
이 설정은 click_drag 확장의 일부이므로, 반드시 gantt.plugins 메서드를 통해 click_drag 플러그인을 활성화해야 합니다. 자세한 내용은 DnD로 작업 생성/선택하기 문서를 참고하세요.
click_drag 확장은 다음 기능을 제공합니다:
gantt.config.click_drag 객체는 다음 속성을 가집니다:
{absolute: {left: number, top: number}, relative: {left: number, top: number} }
, gantt.config.click_drag = {
callback: onDragEnd,
ignore: ".gantt_task_line, .gantt_marker_content, .gantt_task_link",
useKey: "ctrlKey"
};
{absolute: {left: number, top: number}, relative: {left: number, top: number} }
, render 함수의 예시 구현:
var node;
gantt.config.click_drag = {
callback: onDragEnd,
singleRow: true,
render: function(start, end){
if(!(node && node.parentNode)){
node = document.createElement("div");
}
var left = Math.min(start.relative.left, end.relative.left);
node.style.top = (start.relative.top - gantt.config.row_height) + "px";
node.style.left = left + "px";
node.style.width = Math.abs(start.relative.left - end.relative.left) + "px";
node.style.height = gantt.config.row_height + "px";
node.style.position = "absolute";
return node;
}
};