基于vue cli3实现甘特图拖拽

基于vue cli3实现甘特图拖拽

因为工作中要用到甘特图，所以我在网上搜索可以用的甘特图，搜索了好多，但是网上搜到大多数都很鸡肋，不能直接使用，最后我在github上搜索到一个相对成熟的甘特图。附上链接https://github.com/w1301625107/Vue-Gantt-chart
刚开始我看不懂这个博主写的代码，于是想自己写，但是尝试了几天，最后还是以失败告终。没办法活是我自己的，总得想办法弄出来啊，所以我硬着头皮改造代码。先附上博主的甘特图，我感觉这是我见过颜值最高的甘特图了。

，
因为需求要求做到可拖拽，以下是我实现拖拽的过程。

在这里插入图片描述
JS部分
首先介绍第一个mousedown,当我按下鼠标，我会记录当前块的索引。draggable设为可拖拽。
在这里插入图片描述

接着介绍drop，也就是移动到该行触发的事件，这里我用val传参（拖动到指定行的数据）和所有数据对比较，获取该行的索引，接着我会判断拖动的块与该行的块是否冲突。

以上就是我的分享，如果有什么问题，欢迎大家留言。
————————————————
版权声明：本文为CSDN博主「Wombat-」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/haluodepaopao/article/details/103071592