DHTMLX Gantt是用于跨瀏覽器和跨平臺應用程序的功能齊全的Gantt圖表。可滿足項目管理應用程序的大部分開發需求，具備完善的甘特圖圖表庫，功能強大，價格便宜，提供豐富而靈活的JavaScript API接口，與各種服務器端技術（PHP，ASP.NET，Java等）簡單集成，滿足多種定制開發需求。本文給大家講解DHTMLX Gantt的任務內容如何顯示，歡迎大家下載最新版試用體驗。

DHTMLX Gantt正版試用下載

拖動允許用戶快速更改任務的開始（結束）日期及其持續時間。
默認情況下，拖放是啟用的，用戶可以在時間線中沿著它的行拖動任務。

要自定義拖放行為，請使用以下事件：

• - 拒絕拖動特定任務
• - 限制拖動區域或在用戶拖動任務時提供一些其他邏輯
• - 在任務被拖到新位置后進行后處理

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 事件：

• 每次用戶在時間軸區域中使用鼠標進行拖動移動時觸發：移動、調整任務大小或更改任務進度。
• 拖動運動的類型作為第二個參數-mode傳遞。
• 拖動運動類型的所有可用值都存儲在屬性中。

很快，一切都按以下順序發生：

1. 用戶移動。
2. dhtmlxGantt 根據新位置重新計算任務的日期。
3. dhtmlxGantt 觸發事件。
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、將父項與子項一起拖動

要在用戶拖動其父項的任務時允許拖動子項，請使用事件（請參閱事件的更多信息）：

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 版本中可用。）

默認情況下，項目類型的任務不可拖動。您可以使用配置啟用項目拖放：

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

.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[數據綁定屬性=“結束日期”]

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

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

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

DHTMLX Gantt享有超十年聲譽，支持跨瀏覽器和跨平臺，性價比高，可滿足項目管理控件應用的所有需求，是最完善的甘特圖圖表庫。

慧都2022年終狂歡火熱進行中，全場產品超低價，DHTMLX全系產品享8.8折！了解更多活動詳情，歡迎訪問慧都網咨詢。

甘特圖控件交流群：764148812    歡迎進群交流討論

慧都年終狂歡季，全場產品，限時特惠，立即了解詳情！