在项目管理或任务调度类应用中允许用户通过拖拽调整任务的顺序是一项非常实用的交互功能。VXE Gantt 组件提供了简单易用的行拖拽排序支持只需配置 rowConfig.drag 和列属性 dragSort 即可快速启用。说明甘特图全局配置 rowConfig.drag 开启行拖拽功能允许用户通过鼠标拖动调整行的顺序指定列的配置中 dragSort 标识该列可作为拖拽排序的“把手”通常建议将 dragSort: true 设置在第一列或专门的序号/标题列上rowConfig.drag 控制是否允许拖拽行而 dragSort 控制哪一列可以触发拖拽。二者必须同时启用拖拽排序才会生效。代码templatedivvxe-buttonstatussuccessclickresultEvent获取排序后的数据/vxe-buttonvxe-ganttrefganttRefv-bindganttOptions/vxe-gantt/div/templatescriptsetupimport{ref,reactive}fromvueconstganttRefref()constganttOptionsreactive({border:true,// 1. 开启行拖拽rowConfig:{drag:true},taskBarConfig:{showProgress:true,showContent:true,barStyle:{round:true,bgColor:#f56565,completedBgColor:#65c16f}},taskViewConfig:{tableStyle:{width:480}},columns:[{type:seq,width:70},// 序号列不参与拖拽{field:title,title:任务名称,dragSort:true},// 2. 指定拖拽把手列{field:start,title:开始时间,width:100},{field:end,title:结束时间,width:100}],data:[{id:10001,title:A项目,start:2024-03-01,end:2024-03-04,progress:3},{id:10002,title:城市道路修理进度,start:2024-03-03,end:2024-03-08,progress:10},{id:10003,title:B大工程,start:2024-03-03,end:2024-03-11,progress:90},{id:10004,title:超级大工程,start:2024-03-05,end:2024-03-11,progress:15},{id:10005,title:地球净化项目,start:2024-03-08,end:2024-03-15,progress:100},{id:10006,title:一个小目标项目,start:2024-03-10,end:2024-03-21,progress:5},{id:10007,title:某某计划,start:2024-03-15,end:2024-03-24,progress:70},{id:10008,title:某某科技项目,start:2024-03-20,end:2024-03-29,progress:50},{id:10009,title:地铁建设工程,start:2024-03-19,end:2024-03-20,progress:5},{id:10010,title:铁路修建计划,start:2024-03-12,end:2024-03-20,progress:10}]})constresultEvent(){const$ganttganttRef.valueif($gantt){// 获取拖拽排序后的最新数据包含调整后的行顺序consttableData$gantt.getFullData()console.log(tableData)}}/script拖拽完成事件row-dragstart 当行开始拖拽时会触发改事件row-dragover 当行拖拽过程中会触发改事件row-dragend 当行拖拽结束时会触发改事row-dragover 会非常频繁触发请避免在该事件中执行复杂计算或频繁 DOM 操作.https://gantt.vxeui.com