dhtmlxGantt 库提供了一个扩展,增强了在时间轴上通过拖拽管理任务的能力。
简而言之,click_drag 扩展支持以下功能:
要开始使用该扩展,请通过 gantt.plugins 方法启用 click_drag 插件。
要开启高级拖拽功能,请设置 click_drag 配置项,并在其对象内包含下列所需属性:
gantt.config.click_drag = {
callback: onDragEnd,
singleRow: true
};
{absolute: {left: number, top: number}, relative: {left: number, top: number} }
,{absolute: {left: number, top: number}, relative: {left: number, top: number} }
,你可以将以下事件附加到时间轴视图元素(默认是 gantt.$task_data,包含任务条):
gantt.$task_data.attachEvent("onBeforeDrag", function (coords) {
gantt.message("onBeforeDrag event");
});
Related sample: Attaching event handlers for the "click_drag" extension
请注意,事件处理器只能添加到已存在的元素上。因此,需在初始化 Gantt 之后添加事件处理器,否则不会生效,因为元素尚未创建。
可以直接在时间轴的空白处点击以设置任务起始日期,然后向右拖拽以定义任务持续时间,从而创建任务。
gantt.config.click_drag = {
callback: onDragEnd,
singleRow: true
};
gantt.init("gantt_here");
gantt.parse(tasks);
function onDragEnd(startPoint,endPoint,startDate,endDate,tasksBetweenDates,tasksInRow){
if (tasksInRow.length === 1) {
var parent = tasksInRow[0];
gantt.createTask({
text:"Subtask of " + parent.text,
start_date: gantt.roundDate(startDate),
end_date: gantt.roundDate(endDate)
}, parent.id);
} else if (tasksInRow.length === 0) {
gantt.createTask({
text:"New task",
start_date: gantt.roundDate(startDate),
end_date: gantt.roundDate(endDate)
});
}
}
Related sample: Create new tasks by Drag and Drop
click_drag 扩展还支持通过拖拽为未排期任务设置时间区间。
支持多种模式下通过拖拽选择任务:按日期、按行或在范围内选择。
gantt.config.multiselect = true;
gantt.config.click_drag = {
callback: onDragEnd
};
gantt.config.autoscroll = true;
gantt.config.autoscroll_speed = 50;
gantt.init("gantt_here");
gantt.parse(tasks);
function onDragEnd(startPoint,endPoint,startDate,endDate,tasksBetweenDates,tasksInRows){
var mode = document.querySelector("input[name=selectMode]:checked").value;
switch(mode) {
case "1":
unselectTasks();
tasksBetweenDates.forEach(function(item) {
gantt.selectTask(item.id);
});
break;
case "2":
unselectTasks();
tasksInRows.forEach(function(item) {
gantt.selectTask(item.id);
});
break;
case "3":
unselectTasks();
for (var i=0; i<tasksBetweenDates.length; i++) {
for (var j=0; j<tasksInRows.length; j++) {
if (tasksBetweenDates[i] === tasksInRows[j]) {
gantt.selectTask(tasksBetweenDates[i].id);
}
}
}
break;
return;
}
}
Related sample: Select multiple tasks by Drag and Drop
也可以通过拖拽为拆分任务创建部分。
gantt.config.click_drag = {
callback: onDragEnd,
singleRow: true
}
gantt.init("gantt_here");
gantt.parse(tasks);
function onDragEnd(startPoint,endPoint,startDate,endDate,tasksBetweenDates,tasksInRow){
if (tasksInRow.length === 1) {
var currentTask = tasksInRow[0];
if (currentTask.type === "project") {
currentTask.render = "split";
gantt.addTask({
text:"Subtask of " + currentTask.text,
start_date: gantt.roundDate(startDate),
end_date: gantt.roundDate(endDate)
}, currentTask.id);
} else {
var projectName = "new Project " + currentTask.text;
var newProject = gantt.addTask({
text: projectName,
render: "split",
type: "project",
}, currentTask.parent);
gantt.moveTask(
newProject,
gantt.getTaskIndex(currentTask.id),
gantt.getParent(currentTask.id)
);
gantt.moveTask(currentTask.id, 0, newProject);
gantt.calculateTaskLevel(currentTask)
var newTask = gantt.addTask({
text:"Subtask of " + projectName,
start_date: gantt.roundDate(startDate),
end_date: gantt.roundDate(endDate)
}, newProject);
gantt.calculateTaskLevel(newTask);
}
} else if (tasksInRow.length === 0) {
gantt.createTask({
text:"New task",
start_date: gantt.roundDate(startDate),
end_date: gantt.roundDate(endDate)
});
}
}
Related sample: Create split tasks by Drag and Drop
Back to top