之前在移动端项目中,拖拽功能我使用了draggable这个插件,因为PC端使用感很好。

但是,这个插件在移动端存在安卓的兼容问题,解决方法

 <draggable v-model="draggData" class="vux-flexbox vux-flex-row" :end="end" 
          :options="{handle: '.dd'}"
          style="flex-wrap:wrap"
          >
          <flexbox-item :span="1/2" v-for="(item, index) in draggData" :key="index" style="margin-bottom:0.23rem;">
              <div class="flex-demotwo" :style="{backgroundImage: `url(${require('../asssets/images/allgives'+ index +'.png')})`}" @click="dragHandle(item.reportId,item,index)">
                  <span v-show='iseditor'><x-icon type="ios-close-outline" size="15" class="icon_rigTop"></x-icon></span>
                  <div class="dd">
                    <div class="demotwotitle minFontSizemid textOver"><b>{{item.reportName}}</b></div>
                    <span class="textOver minFontSizemid">{{item.reportNR?item.reportNR.substr(0,10):''}}</span>
                  </div>
              </div>
          </flexbox-item>
          </draggable>

重点是,添加:options="{handle: ‘.dd’}",dd这个class包括的内容是可长按拖拽的,此时非此class包括的内容,就不会存在点击问题。

百度的到原创作者的链接:https://blog.csdn.net/sunshineln/article/details/107249852

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐