vue2实现可拖拽甘特图（结合element-ui的gantt图）

在Vue 2中结合Element UI实现一个可拖拽甘特图，可以使用Element UI的el-table组件来模拟Gantt图的外观，并结合Vue的v-draggable指令来实现拖拽功能。以下是一个简化版的示例代码：

1. 安装vuedraggable库：

npm install vuedraggable

2. 创建一个Vue组件：

<template>
  <el-table :data="tasks" style="width: 100%">
    <el-table-column label="任务名称" width="240">
      <template slot-scope="scope">
        <div v-draggable="scope.row" class="drag-column">
          {{ scope.row.name }}
        </div>
      </template>
    </el-table-column>
    <!-- 其他列定义 -->
  </el-table>
</template>
 
<script>
import draggable from 'vuedraggable'
 
export default {
  directives: {
    draggable: {
      bind(el, binding) {
        const dragHandle = document.createElement('div')
        dragHandle.classList.add('drag-handle')
        el.appendChild(dragHandle)
        new draggable.Draggable(el, {
          group: 'row',
          draggable: '.drag-handle',
          ghostClass: 'ghost'
        })
      }
    }
  },
  data() {
    return {
      tasks: [
        // 任务数据
      ]
    }
  }
}
</script>
 
<style>
.drag-column {
  cursor: move;
}
.drag-handle {
  cursor: move;
}
.ghost {
  opacity: 0.5;
}
</style>

在这个例子中，我们定义了一个名为draggable的自定义指令来处理拖拽逻辑。每个任务都被包裹在一个可拖拽区域内，通过Element UI的el-table组件来展示。拖拽功能由vuedraggable库提供，它允许我们在表格行之间拖拽任务。

请注意，这个示例只包含了拖拽功能的核心部分，您可能需要根据自己的需求添加更多的逻辑，例如更新数据、处理拖拽事件等。