在Vue 2中结合Element UI实现一个可拖拽甘特图，可以使用Element UI的el-table组件来模拟Gantt图的外观，并结合Vue的v-draggable指令来实现拖拽功能。以下是一个简化版的示例代码：
- 安装
vuedraggable库：
npm install vuedraggable- 创建一个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库提供，它允许我们在表格行之间拖拽任务。
请注意，这个示例只包含了拖拽功能的核心部分，您可能需要根据自己的需求添加更多的逻辑，例如更新数据、处理拖拽事件等。