当前位置：首页 > VUE

vue实现拖拽甘特图

2026-02-17 21:27:40VUE

实现拖拽甘特图的核心步骤

使用Vue实现拖拽甘特图需要结合拖拽库和可视化组件。推荐使用vue-draggable或原生HTML5拖拽API，配合自定义渲染逻辑。

安装必要依赖

确保项目已安装vuedraggable和日期处理库（如dayjs）：

npm install vuedraggable dayjs

基础甘特图结构

创建Vue组件，定义任务数据结构和甘特图布局：

<template>
  <div class="gantt-container">
    <div class="gantt-header">
      <!-- 时间轴标题 -->
    </div>
    <draggable 
      v-model="tasks" 
      @end="onDragEnd">
      <div v-for="task in tasks" :key="task.id" class="gantt-task">
        {{ task.name }}
      </div>
    </draggable>
  </div>
</template>

处理拖拽逻辑

实现拖拽后的日期计算和位置更新：

export default {
  data() {
    return {
      tasks: [
        { id: 1, name: 'Task 1', start: '2023-01-01', end: '2023-01-05' }
      ]
    }
  },
  methods: {
    onDragEnd(event) {
      const taskIndex = event.oldIndex;
      const newXPosition = event.newX;
      this.updateTaskDates(taskIndex, newXPosition);
    },
    updateTaskDates(index, pixels) {
      const days = Math.round(pixels / this.pixelsPerDay);
      this.tasks[index].start = dayjs(this.tasks[index].start)
        .add(days, 'day')
        .format('YYYY-MM-DD');
    }
  }
}

样式布局

添加CSS实现甘特图视觉布局：

.gantt-container {
  display: grid;
  grid-template-columns: 200px repeat(30, 50px);
}
.gantt-task {
  grid-column: span 5; /* 根据任务时长调整 */
  background: #4CAF50;
  height: 30px;
  cursor: move;
}