vue 之 draggable(移动端安卓兼容问题)
之前在移动端项目中,拖拽功能我使用了draggable这个插件,因为PC端使用感很好。但是,这个插件在移动端存在安卓的兼容问题,解决方法<draggable v-model="draggData" class="vux-flexbox vux-flex-row" :end="end":options="{handle: '.dd'}"style="flex-wrap:wrap"><
·
之前在移动端项目中,拖拽功能我使用了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
更多推荐
已为社区贡献2条内容
所有评论(0)