两天前，客户方提出了快捷工作台的需求，通俗点来说，可经过拖拽、增减等操作，将菜单拖入到想放置的模块中，一起可对大模块拖拽排序，终究以装备的模块或菜单，在主页进行展现。该需求，完结逻辑上其实很简单明晰，无非是承认拖拽区域，拖拽目标，按照一定规则操作菜单，但在大的功能做完之后，遗留了一些小的bug，这些小bug简单让人遗漏。因而，在这里记录一下。
一、完结流程
现在项目适用结构：vue2+ant-design-vue
拖拽组件：vuedraggable
-
页面布局
主页以flex布局去完结，完结固定两行，列数自适应的布局。
弹窗采用ant-design供给的模态框组件去封装，一起依据业务需求，接入vuedraggable组件。这里代码比较简单，直接贴图，详细完结不做赘述。
二、遇到的问题
-
2.1、弹框引发翻滚穿透
问题描绘：在打开的弹窗中，设置翻滚区域，当翻滚到弹窗底部或头部，一起超出父级元素翻滚区域时，会呈现父级div一起翻滚现象，也便是所谓的翻滚穿透。 怎么处理：监听弹窗元素翻滚开端start办法，在该办法中，将根元素翻滚特点躲藏，对弹窗翻滚完毕end办法监听，恢复根元素的翻滚特点。
<draggable @start="start" @end="end"></draggable>
start() {
// 防止拖动时，翻滚穿透
document.getElementById('app').style.overflow = 'hidden'
},
end() {
document.getElementById('app').style.overflow = ''
},
-
2.2、封闭弹窗后，主页展现区域部分烘托
问题描绘：对弹窗内容操作之后，需求将弹窗中已经拖拽的元素，按照项目需求展现在主页某个区域中，因为vue只会在加载页面时烘托一次，因而封闭弹窗之后，主页区域不会从头烘托，因而呈现了展现区域款式紊乱现象。 怎么处理：vue只有当组件内容获取款式发生改动之后，才会从头进行烘托，因而我们可认为组件设置key特点，key内容为当时时刻值，因为时刻值随时在改动，因而vue会从头烘托。
<div class="impact-quick-card-container" :key="new Date().getTime()"></div>
-
2.3、拖拽翻滚区域
问题描绘：需求指定固定区域，进行拖拽操作，怎么承认翻滚区域？ 怎么处理：依据vuedraggable文档描绘，能够设置handle特点，该特点中界说拖拽的元素，可认为需求退拽的区域dom设置该特点。
-
2.4、多级元素拖动规划
问题描绘：需求为一个多层拖拽作用，即菜单能够拖拽到所属模块，一起所属模块也能相互拖动，用于排序，怎么设置多级元素关联关系的元素拖动呢？ 怎么处理：首先将模块与菜单元素分层，内部菜单之间可拖动，设置group值为menu，外层模块元素区域，设置别的的group特点为module，经过group区别，来控制不同的拖拽分组。
<draggable group="module">
<div v-for="(item, index) in modules" :key="index">
<h3>{{ item.modelName }}</h3>
<draggable group="menu">
<div v-for="(element, idx) in item.rows" :key="idx" class="move list-group-item ">
<span class="text" :title="element.benchName">{{ element.benchName }}</span>
<b class="list-group-item-icon" @click="subtractPage(item.rows, idx, element)">-</b>
</div>
</draggable>
</div>
</draggable>
-
2.5、拖拽时，无法一起翻滚
问题描绘：当拖拽某个菜单元素且超过当时区域时，弹窗不向下翻滚。 怎么处理：vuedraggable文档供给了scrollSensitivity特点，用于描绘拖拽距离翻滚区域多远时，翻滚条翻滚。给draggable设置该特点，能够处理该问题。
<draggable group="menu" @start="start" :scrollSensitivity="250">
</draggable>
-
2.6、隐形翻滚条
问题描绘：当呈现翻滚时，怎么将翻滚条做的更美观一些，也便是隐形翻滚条，有翻滚作用，但不呈现浏览器原生翻滚条。 怎么处理：使用内外两层div包裹，经过css控制翻滚区域，外层div翻滚特点设置为hidden，内层使用position：fixed固定区域，一起设置overflow特点，这里要这与，假如想要躲藏浏览器的原生翻滚条，需求设置内层区域高度或宽度高于外层区域。
<div class="impact-quick-card-container" :key="new Date().getTime()">
<div class="quick-card-container">
</div>
</div>
<style lang="less" scoped>
.impact-quick-card-container {
position: relative;
height: 250px;
overflow: hidden;
.quick-card-container {
display: flex;
position: absolute;
width: 100%;
overflow-x: auto;
overflow-y: hidden;
}
}
</style>
-
2.7、flex固定行的布局
问题描绘：怎么使用flex布局，固定行，列跟着设置动态变化。 怎么处理：使用flex的column排序，解决不了该问题。只能经过writing-mode来处理。flex根元素设置writing-mode为vertical-lr，表明元素会从上到下笔直摆放，其次flex子元素div上，设置writing-mode为horizontal-tb，表明该元素将水平从左到右摆放，一起一定要设置子元素的flex宽度，使用50%将行划分为两行。
<div class="wrapper-content">
<div class="module-wrapper" v-for="(menu, idx) in item.rows" :key="idx">
</div>
</div>
<style lang="less" scoped>
.wrapper-content {
display: flex;
writing-mode: vertical-lr;
flex-wrap: wrap;
padding: 15px 10px 5px 10px;
height: 200px;
.module-wrapper {
flex: 0 0 50%;
writing-mode: horizontal-tb;
}
}
</style>
