dhtmlxGantt是用於跨瀏覽器和跨平臺應用程序的功能齊全的JavaScript / HTML5甘特圖，允許你創建動態甘特圖，並以一個方便的圖形化方式可視化項目進度。有了dhtmlxGantt，你可以顯示活動之間的依賴關係，顯示具有完成百分比陰影的當前任務狀態以及組織活動到樹結構。
在管理項目時，用戶可能需要更改任務順序或在多個甘特項目之間移動任務。今天，我們將熟悉在dhtmlxGantt中實現此功能的方式。
我們的HTML5 Gantt提供了兩種在網格中對任務進行重新排序的替代方法：
通過拖放
通過分類
默認情況下，兩種模式均禁用。
爲了通過拖放操作使任務重新排序，我們需要將order_branch選項設置爲'true'：
// ordering tasks only inside a branch
gantt.config.order_branch = true;
gantt.init("gantt_here");order_branch屬性激活“分支”模式，該模式可對同一嵌套級別內的任務的重新排序。
更改任務位置涉及觸發onBeforeTaskMove或onAfterTaskMove事件。第一個可以用來控制任務可以移到哪裏。爲了防止移動到另一個子分支，請使用onBeforeTaskMove事件：
gantt.config.order_branch = true;
gantt.attachEvent("onBeforeTaskMove", function(id, parent, tindex){
var task = gantt.getTask(id);
if(task.parent != parent)
return false;
return true;
});
gantt.init("gantt_here");
如果甘特圖中包含很多任務，則分支重新排序的默認模式可能會降低性能。爲了加快速度，您可以使用“標記”模式：
gantt.config.order_branch = "marker";
在此模式下，僅將任務名稱重新排序（按住鼠標左鍵），並且僅當任務放在目標位置時（鬆開鍵）才重新渲染甘特圖：
與默認模式不同，更改任務位置不涉及觸發onBeforeTaskMove或onAfterTaskMove事件。爲防止任務掉到特定位置，我們可以改用onBeforeRowDragMove事件。請注意，它僅在“標記”模式下有效：
// ordering tasks only inside a branch
gantt.config.order_branch = "marker";
gantt.attachEvent("onBeforeRowDragMove", function(id, parent, tindex){
var task = gantt.getTask(id);
if(task.parent != parent)
return false;
return true;
});
gantt.init("gantt_here");希望我們的教程對您有所幫助！如果您想親自試用dhtmlxGantt，請下載30天免費評估版。鏈接：https://www.evget.com/product/4213/download