两天前,客户方提出了快捷工作台的需求,通俗点来说,可经过拖拽、增减等操作,将菜单拖入到想放置的模块中,一起可对大模块拖拽排序,终究以装备的模块或菜单,在主页进行展现。该需求,完结逻辑上其实很简单明晰,无非是承认拖拽区域,拖拽目标,按照一定规则操作菜单,但在大的功能做完之后,遗留了一些小的bug,这些小bug简单让人遗漏。因而,在这里记录一下。

一、完结流程

现在项目适用结构:vue2+ant-design-vue

拖拽组件:vuedraggable

  • 页面布局

主页以flex布局去完结,完结固定两行,列数自适应的布局。

弹窗采用ant-design供给的模态框组件去封装,一起依据业务需求,接入vuedraggable组件。这里代码比较简单,直接贴图,详细完结不做赘述。

vuedraggable插件在弹框中使用时,遇到了哪些问题

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>