基于vue cli3实现甘特图拖拽
基于vue cli3实现甘特图拖拽
因为工作中要用到甘特图，所以我在网上搜索可以用的甘特图，搜索了好多，但是网上搜到大多数都很鸡肋，不能直接使用，最后我在github上搜索到一个相对成熟的甘特图。附上链接https://github.com/w1301625107/Vue-Gantt-chart
刚开始我看不懂这个博主写的代码，于是想自己写，但是尝试了几天，最后还是以失败告终。没办法活是我自己的，总得想办法弄出来啊，所以我硬着头皮改造代码。先附上博主的甘特图，我感觉这是我见过颜值最高的甘特图了。
因为需求要求做到可拖拽，以下是我实现拖拽的过程。
JS部分
首先介绍第一个mousedown,当我按下鼠标，我会记录当前块的的索引。draggable设为可拖拽。
接着介绍drop，也就是移动到该行触发的事件，这里我用val传参（拖动到指定行的数据）和所有数据对比较，获取该行的索引，接着我会判断拖动的块与该行的块是否冲突。
以上就是我的分享，如果有什么问题，欢迎大家留言。