一次完整的拖拽项目总结之（一）整体项目

在https://blog.csdn.net/juliotang/article/details/89386319这篇文章中描述了拖拽所基于的基础实现，最近在实际项目中实现了一个较复杂的拖拽功能，在此予以总结。项目基于vue+iview控件库，整体效果如下：

整体功能上部是一个三级的标签结构，二级（蓝色）和三级（绿色）标签部分可拖拽，拖拽至下部面板；拖拽的标签可以实现在上部原始区域拖走后消失并且当在下部面板清楚后回归到上部面板；同时实现被拖拽区域的一个简单逻辑功能（标签块之间的叫交集或者并集，这里涉及到三个层级，都可以实现逻辑关系的交并集）；下部面板内部的元素也是可以随意拖拽的。在实际项目中，下部面板形成了最终标签条件的json结构，传给后端。
设计的技术细节较多，暂时写到这里还没有一个整体文章框架，所以计划在这个系列边写边总结喽，每一个章节描述一个具体的实现技术细节。
完整的代码在：https://github.com/tanglingjia/exp/blob/master/src/components/DragAndDropAD.vue