项目管理工具DHTMLX Gantt灯箱元素配置教程：在时间轴内拖动任务

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

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

拖动允许用户快速更改任务的开始（结束）日期及其持续时间。
默认情况下，拖放是启用的，用户可以在时间线中沿着它的行拖动任务。

要自定义拖放行为，请使用以下事件：

• onBeforeTaskDrag - 拒绝拖动特定任务
• onTaskDrag - 限制拖动区域或在用户拖动任务时提供一些其他逻辑
• onAfterTaskDrag - 在任务被拖到新位置后进行后处理

1、拒绝拖拽特定任务

gantt.attachEvent("onBeforeTaskDrag", function(id, mode, e){
if(gantt.getGlobalTaskIndex(id)%2==0){
return false; //denies dragging if the global task index is odd
}
return true; //allows dragging if the global task index is even
});

2、拒绝将任务拖出特定日期

拒绝将任务拖出特定日期，请使用onTaskDrag事件。

onTaskDrag 事件：

• 每次用户在时间轴区域中使用鼠标进行拖动移动时触发：移动、调整任务大小或更改任务进度。
• 拖动运动的类型作为第二个参数-mode传递。
• 拖动运动类型的所有可用值都存储在drag_mode属性中。

很快，一切都按以下顺序发生：

1. 用户移动。
2. dhtmlxGantt 根据新位置重新计算任务的日期。
3. dhtmlxGantt 触发onTaskDrag事件。
4. dhtmlxGantt 在甘特图中重新呈现任务。
   
   由于onTaskDrag事件在 dhtmlxGantt 重新计算后触发，您可以在事件处理程序中为拖动的任务指定任何自定义值，而不必担心这些值会被覆盖。结果，任务将呈现在所需位置。

假设您要禁止用户将任务拖出“2020 年 3 月 31 日 - 2020 年 4 月 11 日”的时间间隔。

然后，您可以使用以下代码：

拒绝将任务拖出间隔 - [31.03.2020, 11.04.2020]

var leftLimit = new Date(2020, 2 ,31), rightLimit = new Date(2020, 3 ,12);

gantt.attachEvent("onTaskDrag", function(id, mode, task, original){
var modes = gantt.config.drag_mode;
if(mode == modes.move || mode == modes.resize){

var diff = original.duration*(1000*60*60*24);

if(+task.end_date > +rightLimit){
task.end_date = new Date(rightLimit);
if(mode == modes.move)
task.start_date = new Date(task.end_date - diff);
}
if(+task.start_date < +leftLimit){
task.start_date = new Date(leftLimit);
if(mode == modes.move)
task.end_date = new Date(+task.start_date + diff);
}
}
});

相关示例： 拒绝将任务拖出特定日期

3、将父项与子项一起拖动

要在用户拖动其父项的任务时允许拖动子项，请使用onTaskDrag事件（请参阅上面事件的更多信息）：

gantt.attachEvent("onTaskDrag", function(id, mode, task, original){
var modes = gantt.config.drag_mode;
if(mode == modes.move){
var diff = task.start_date - original.start_date;
gantt.eachTask(function(child){
child.start_date = new Date(+child.start_date + diff);
child.end_date = new Date(+child.end_date + diff);
gantt.refreshTask(child.id, true);
},id );
}
});
//rounds positions of the child items to scale
gantt.attachEvent("onAfterTaskDrag", function(id, mode, e){
var modes = gantt.config.drag_mode;
if(mode == modes.move ){
var state = gantt.getState();
gantt.eachTask(function(child){
child.start_date = gantt.roundDate({
date:child.start_date,
unit:state.scale_unit,
step:state.scale_step
});
child.end_date = gantt.calculateEndDate(child.start_date,
child.duration, gantt.config.duration_unit);
gantt.updateTask(child.id);
},id );
}
});

4、拖动带有子任务的项目 （此功能仅在 Gantt PRO 版本中可用。）

默认情况下，项目类型的任务不可拖动。您可以使用drag_project配置启用项目拖放：

gantt.config.drag_project = true;

相关示例： 可拖动项目

5、将依赖任务与独立任务拖在一起

有几种方法可以实现随其相关任务一起移动的任务。您可以在单独的文章“将任务与其相关任务一起拖动”中阅读所有这些内容。

6、设置最短任务持续时间

可以通过min_duration设置指定最短任务持续时间。

该选项定义了在调整大小时可以设置的任务的最小大小，可用于防止用户设置零持续时间。

该值以毫秒为单位设置：

// 1 day
gantt.config.min_duration = 24*60*60*1000;

//OR

// 1 hour
gantt.config.min_duration = 60*60*1000;

7、在任务拖动期间自动滚动

如果您在甘特图中有一个大型数据集，您通常需要将任务拖到一个新的较远位置，或者在相距很远的任务之间设置链接。

在这种情况下，自动滚动功能会有很大帮助。它默认启用，但您可以通过自动滚动配置选项管理此行为。

gantt.config.autoscroll = false;
gantt.init("gantt_here");
此外，您可以借助相应的属性 - autoscroll_speed以毫秒为单位调整自动滚动的速度：

gantt.config.autoscroll = true;
gantt.config.autoscroll_speed = 50;

gantt.init("gantt_here");

8、禁用调整特定任务的大小

如果你想阻止某些任务被调整大小，你可以做两件事：

通过 CSS 从 UI 中删除任务的调整大小句柄。为此，您需要使用task_class模板向所需项目添加一个额外的 CSS 类，以便您可以通过选择器找到它们：

gantt.templates.task_class = function(start, end, task){
if(task.no_resize) { // no_resize is a custom property used for the demonstration
return "no_resize";
}
return "";

然后，您可以使用以下 CSS 隐藏调整大小的手柄：

.no_resize .gantt_task_drag{
display: none !important;
}
使用onBeforeTaskDrag事件防止代码拖放。从处理程序返回false将阻止调整大小：
gantt.attachEvent("onBeforeTaskDrag", function(id, mode, e){
if(mode === "resize" && gantt.getTask(id).no_resize){
return false;
}
return true;
});

9、任务的哪一侧正在调整大小

拖放的“调整大小”模式意味着用户可以从开始日期或结束日期调整任务的大小。

如果您需要通过调整大小找出用户正在修改的日期，您可以使用gantt.getState().drag_from_start标志：

gantt.attachEvent("onBeforeTaskDrag", function(id, mode, e){
if(mode === "resize"){
if(gantt.getState().drag_from_start === true) {
// changing the start date of a task
} else {
// changing the end date of a task
}
}
return true;
});

10、禁用调整任务开始或结束日期的大小

您可以使用以下选择器定位调整大小手柄：

.gantt_task_drag[data-bind-property="start_date"]
.gantt_task_drag[数据绑定属性=“结束日期”]

以下 CSS 可用于禁用调整任务开始日期的大小：

.gantt_task_drag[data-bind-property="start_date"]{
display: none !important;
}

同样，防止调整结束日期的大小如下所示：

.gantt_task_drag[data-bind-property="end_date"]{
display: none !important;
}

另一种方法是使用onBeforeTaskDrag事件。从处理程序返回false将阻止调整大小：

gantt.attachEvent("onBeforeTaskDrag", function(id, mode, e){
if(mode === "resize"){
if(gantt.getState().drag_from_start === true) {
return false;
} else {
// changing the end date of a task
}
}
return true;
});