之前做的一个支持拖拽的甘特图项目，现在开源一下： vue-drag-gantt-chart

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 912 天前的主题，其中的信息可能已经有所发展或是发生改变。

去年做的一个展示时间进度的甘特图项目，基于一个开源项目二次开发的，我们需求是需要实现拖拽调整任务，最近抽空把原始的业务代码去掉了，现在开源一下： https://github.com/liyang5945/vue-drag-gantt-chart

基于Vue-Gantt-chart 修改而来，改动如下：

样式调整，添加顶部部的时间刻度格和左侧日期。滚动插件使用 iscroll 实现，使滚动条样式在各浏览器下保持一致，支持鼠标按住拖动，类似手机上的按住滚动效果。
数据分组：不同属性的甘特行可以分组，分组后数据渲染也是动态的，即只渲染浏览器视口内的数据，我本机测试万级数据(500 行 25 列)轻微卡顿。
数据搜索：搜索后高亮显示结果，并滚动到相应任务位置，若搜索到多个结果，继续点搜索按钮跳转到下一个结果。
甘特块拖拽调整：基于浏览器原生拖拽事件实现，不同行之间的甘特块可以拖拽调整，调整时可以做一些校验，代码里暂时只做了时间校验，拖拽后默认会有一个黑色阴影块显示原来的任务，在配置项里可以设置为不显示，调整确认弹窗也可以选择显示或不显示(默认不显示)。
右键菜单：若想要调整的行竖向间距过大不方便拖拽时，可使用右键菜单调整任务，可以选择复制或交换。