当前位置：首页 > VUE

vue实现拖拽甘特图

2026-03-29 21:46:19VUE

Vue实现拖拽甘特图的方法

使用第三方库（如vue-gantt-elastic）

安装vue-gantt-elastic库，该库专为Vue设计，支持拖拽、缩放和动态数据绑定。通过npm或yarn安装后，在组件中引入并配置数据模型和时间范围。

npm install vue-gantt-elastic

示例代码：

<template>
  <gantt-elastic
    :tasks="tasks"
    :options="options"
    @task-changed="handleTaskChange"
  ></gantt-elastic>
</template>

<script>
import GanttElastic from 'vue-gantt-elastic';
export default {
  components: { GanttElastic },
  data() {
    return {
      tasks: [...], // 任务数据
      options: {  // 配置项
        maxRows: 100,
        title: {
          label: '项目计划'
        }
      }
    };
  },
  methods: {
    handleTaskChange(task) {
      // 处理拖拽后的任务更新逻辑
    }
  }
};
</script>

自定义实现拖拽逻辑

基于HTML5的拖拽API和Vue的事件绑定，手动实现甘特图拖拽功能。需要监听dragstart、dragover和drop事件，动态更新任务的位置数据。

<template>
  <div class="gantt-container">
    <div 
      v-for="task in tasks" 
      :key="task.id"
      class="task-bar"
      draggable="true"
      @dragstart="dragStart(task)"
      @dragover.prevent
      @drop="drop(task)"
    ></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tasks: [...],
      draggedTask: null
    };
  },
  methods: {
    dragStart(task) {
      this.draggedTask = task;
    },
    drop(targetTask) {
      // 更新任务时间或顺序
      const newStartDate = calculateNewDate(targetTask);
      this.draggedTask.start = newStartDate;
    }
  }
};
</script>

结合D3.js与Vue

利用D3.js的强大可视化能力绘制甘特图，Vue管理数据状态。通过D3的拖拽行为（d3-drag）实现交互，Vue响应式更新数据。

vue实现拖拽甘特图

<template>
  <div ref="ganttChart"></div>
</template>

<script>
import * as d3 from 'd3';
export default {
  mounted() {
    this.initGantt();
  },
  methods: {
    initGantt() {
      const svg = d3.select(this.$refs.ganttChart)
        .append('svg')
        .attr('width', '100%');

      // 绑定拖拽事件
      svg.selectAll('.task')
        .data(this.tasks)
        .call(d3.drag()
          .on('drag', (event, d) => {
            d.x = event.x; // 更新任务位置
            this.$forceUpdate(); // 触发Vue响应式更新
          })
        );
    }
  }
};
</script>