项目管理工具DHTMLX Gantt灯箱元素配置教程：使用 DnD 创建/选择任务

DHTMLX Gantt是用于跨浏览器和跨平台应用程序的功能齐全的Gantt图表。可满足项目管理应用程序的大部分开发需求，具备完善的甘特图图表库，功能强大，价格便宜，提供丰富而灵活的JavaScript API接口，与各种服务器端技术（PHP，ASP.NET，Java等）简单集成，满足多种定制开发需求。本文给大家讲解DHTMLX Gantt使用 DnD 创建/选择任务，欢迎大家下载最新版试用体验。

DHTMLX Gantt正版试用下载（qun：764148812）https://www.evget.com/product/4213/download

dhtmlxGantt 库提供了一个扩展，其中包括在时间线中处理任务时的高级拖放功能。

总而言之，click_drag扩展允许：

• 使用拖放创建任务
• 使用拖放设置计划外任务的时间
• 通过拖放选择任务
• 使用拖放功能创建部分拆分任务（专业版）

要开始使用扩展，请使用gantt.plugins方法启用click_drag插件。

要启用高级拖放，请指定click_drag配置选项，并在其对象内从下面的列表中设置必要的属性：

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

• className - ( string ) 为选定元素设置自定义 CSS 类
• render - ( function ) 一个函数，它创建一个在拖动过程中呈现的元素。接受两个参数：
  • startPoint - ( object ) - 类型的对象：
    {absolute: {left: number, top: number}, relative: {left: number, top: number} }，
    其中 absolute - 文档左上角的坐标，relative - 用作视口的左上角元素的坐标
  • endPoint - ( object ) 类型的对象：
    {absolute: {left: number, top: number}, relative: {left: number, top: number} }，
    其中 absolute - 文档左上角的坐标，relative - 用作视口的左上角元素的坐标
• viewPort - ( HTMLElement ) 附加事件和选择的元素
• useRequestAnimationFrame - ( boolean ) 定义在渲染过程中是否使用 requestAnimationFrame
• 回调- ( function ) - 释放鼠标按钮时将调用的函数。采用 6 个参数：
  • startPoint - ( object ) - 类型的对象：
    {absolute: {left: number, top: number}, relative: {left: number, top: number} }，
    其中 absolute - 文档左上角的坐标，relative - 用作视口的左上角元素的坐标
  • endPoint - ( object ) 类型的对象：
    {absolute: {left: number, top: number}, relative: {left: number, top: number} }，
    其中 absolute - 文档左上角的坐标，relative - 用作视口的左上角元素的坐标
  • startDate - ( Date ) 起始点对应的日期
  • endDate - ( Date ) 结束点对应的日期
  • tasksBetweenDates - ( array ) 开始和结束日期点之间的任务数组
  • tasksInRows - ( array ) 在开始和结束坐标之间垂直选择的任务数组
• singleRow - ( boolean ) true 仅在一行中添加选择等于任务的高度

您可以将以下事件附加到作为 viewPort 传递的元素（默认情况下为 gantt.$task_data - 带有任务栏的时间轴的一部分）：

• onBeforeDrag - 在开始拖动之前按下鼠标按钮后触发
• onDrag - 每次在开始拖动后但在释放鼠标按钮之前触发
• onBeforeDragEnd - 在释放鼠标按钮后但在删除呈现的元素和搜索选择的任务之前触发
• onDragEnd - 在删除渲染元素并找到处于选择状态但调用回调函数（如果指定）之前的任务之后触发

1、使用拖放创建任务

您可以通过在时间轴上直接拖放来创建任务，方法是单击空白处以设置任务的开始日期并向右拖动以设置其持续时间。

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)
});
}
}

相关示例： 通过拖放创建新任务

2、为计划外任务设置时间

click_drag扩展允许使用拖放设置未计划任务的时间。

3、通过拖放选择任务

可以在多种模式下通过拖放来选择任务：日期、行或边界。

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;
}
}

相关示例： 通过拖放选择多个任务

4、创建部分拆分任务

您也可以使用拖放来创建拆分任务的一部分。

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)
});
}
}

相关示例： 通过拖放创建拆分任务