基于vxe-gantt实现任务行拖拽排序功能

在现代项目管理工具中，拖拽排序功能极大提升了任务调度的灵活性。VXE Gantt组件通过rowConfig.drag和dragSort参数，为用户提供了直观的行拖拽排序解决方案。

说明

1. 通过全局配置rowConfig.drag开启行拖拽功能，用户可直接拖动调整任务顺序
2. 在列配置中设置dragSort:true定义拖拽触发区域，建议应用于首列或标题列

需同时启用rowConfig.drag和dragSort才能实现完整的拖拽排序效果，前者控制整体功能，后者指定操作区域。

代码

<template>
  <div>
    <vxe-button status="success" @click="resultEvent">获取排序后的数据vxe-button>
    <vxe-gantt ref="ganttRef" v-bind="ganttOptions">vxe-gantt>
  div>
template><script setup>
import { ref, reactive } from 'vue'const ganttRef = ref()const ganttOptions = reactive({
  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'                                        				                
                    

                        

                            
相关文章
                        
                        

                            
                                                                                        
                                                                                                

                                        三国志幻想大陆2枭之歌孙权阵容如何搭配 三幻2枭之歌孙权强度解析
                                        05-24
                                    
                                                                    

                                        抖音网页版官方入口使用教程_抖音网页版官网登录步骤详解
                                        05-24
                                    
                                                                    

                                        三国志幻想大陆2枭之歌公会战攻略指南：三幻2枭之歌公会战玩法全面解析
                                        05-24
                                    
                                                                    

                                        杀戮轮盘值得玩吗：杀戮轮盘游戏规则解析
                                        05-24
                                    
                                                                    

                                        严选漫画登录页面免费下载安装-严选漫画网站页面最新版本入口
                                        05-24
                                    
                                                                    

                                        三国志幻想大陆2枭之歌乐进阵容如何搭配_三幻2枭之歌乐进强度解析
                                        05-24