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

DHTMLX Gantt正版試用下載

dhtmlxGantt 庫提供了一個擴展，其中包括在時間線中處理任務時的高級拖放功能。

總而言之，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)
});
}
}

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

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

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

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