dhtmlxGantt是用于跨瀏覽器和跨平臺應用程序的功能齊全的JavaScript / HTML5甘特圖，允許你創建動態甘特圖，并以一個方便的圖形化方式可視化項目進度。有了dhtmlxGantt，你可以顯示活動之間的依賴關系，顯示具有完成百分比陰影的當前任務狀態以及組織活動到樹結構。

點擊下載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天免費評估版。

dhtmlxGantt可以集成到APS系統中，助力生產排程工作！還可以進行慧都資源調度系統定制，幫助企業完善資源管理，簡化資源計劃，實現利潤增加！