使用 vxe gantt 实现行拖拽排序

在项目管理或使命调治类应用中，答应用户通过拖拽调解使命的序次是一项非常实用的交互功能。VXE Gantt 组件提供了简单易用的行拖拽排序支持，只需设置 rowConfig.drag 和列属性 dragSort 即可快速启用。
分析

• 甘特图全局设置 rowConfig.drag 开启行拖拽功能，答应用户通过鼠标拖动调解行的序次
  
• 指定列的设置中 dragSort 标识该列可作为拖拽排序的“把手”，通常发起将 dragSort: true 设置在第一列或专门的序号/标题列上
  

rowConfig.drag 控制是否答应拖拽行，而 dragSort 控制哪一列可以触发拖拽。二者必须同时启用，拖拽排序才会见效。
代码

1. <template>
2.   
3.     <vxe-button status="success" @click="resultEvent">获取排序后的数据</vxe-button>
4.     <vxe-gantt ref="ganttRef" v-bind="ganttOptions"></vxe-gantt>
5.   
6. </template>

复制代码

拖拽完成事故

• row-dragstart 当行开始拖拽时会触发改事故
  
• row-dragover 当行拖拽过程中会触发改事故
  
• row-dragend 当行拖拽竣事时会触发改事
  

row-dragover 会非常频仍触发，请制止在该事故中实验复杂盘算或频仍 DOM 操纵.
https://gantt.vxeui.com

免责声明：如果侵犯了您的权益，请联系站长及时删除侵权内容，谢谢合作！qidao123.com:ToB企服之家，中国第一个企服评测及软件市场,开放入驻,技术点评得现金.