dhtmlxGantt是用于跨浏览器和跨平台应用程序的功能齐全的Gantt图表。可满足项目管理应用程序的所有需求，是最完善的甘特图图表库。它允许你创建动态甘特图，并以一个方便的图形化方式可视化项目进度。有了dhtmlxGantt，你可以显示活动之间的依赖关系，显示具有完成百分比阴影的当前任务状态以及组织活动到树结构。
重新排序任务
dhtmlxGantt提供了两种在网格中对任务进行重新排序的方法：
- 拖放
- 排序
这些方法是替代的。默认情况下，两种模式都是禁用的。
要启用拖放重排序，请使用order_branch选项：
gantt.config.order_branch = true;
gantt.init("gantt_here");
您可以看一下视频指南，该指南显示了如何在网格中对任务进行排序和重新排序。
在整个甘特结构中拖放
该order_branch选项允许同一树级别中拖动任务。
也可以启用可以在整个甘特图中重新排序任务的模式。这意味着一个任务可以替换任何树级别的另一个任务。要使用这种类型的任务重新排序，请使用order_branch_free选项：
// reordering tasks within the whole gantt
gantt.config.order_branch = true;
gantt.config.order_branch_free = true;
gantt.init("gantt_here");
拒绝掉到特定位置
要拒绝将任务放到特定位置，请使用onBeforeTaskMove或onBeforeRowDragEnd事件：
//prevent moving to another sub-branch:
gantt.attachEvent("onBeforeTaskMove", function(id, parent, tindex){
var task = gantt.getTask(id);
if(task.parent != parent)
return false;
return true;});
//or
gantt.attachEvent("onBeforeRowDragEnd", function(id, parent, tindex){
var task = gantt.getTask(id);
if(task.parent != parent)
return false;
return true;});
改善大型数据集的性能
如果您的甘特图中包含很多任务，则分支重排序的默认模式可能会降低性能。为了加快速度，您可以使用“标记”模式。
gantt.config.order_branch = "marker";
在此模式下，仅将任务名称重新排序（按住鼠标左键），并且仅当将任务放在目标位置时（释放键）才重新渲染甘特图。与默认模式不同，更改任务位置不涉及触发onBeforeTaskMove / onAfterTaskMove事件。
为防止任务掉落到特定位置，请改用onBeforeRowDragMove事件（仅在“标记”模式下有效）。
拖放时突出显示可用放置位置
要在拖动过程中突出显示可用的目标位置（例如，不可能将根节点拖动到另一个根目录下，并且您想在视觉上通知用户此信息），请使用onRowDragStart和onRowDragEnd事件：
gantt.config.order_branch = true;// order tasks only inside a branch
gantt.init("gantt_here");
gantt.parse(demo_tasks);
var drag_id = null;
gantt.attachEvent("onRowDragStart", function(id, target, e) {
drag_id = id;
return true;});
gantt.attachEvent("onRowDragEnd", function(id, target) {
drag_id = null;
gantt.render();});
gantt.templates.grid_row_class = function(start, end, task){
if(drag_id && task.id != drag_id){
if(task.$level != gantt.getTask(drag_id).$level)
return "cant-drop";
}
return "";};