
vue2中vue-draggable-resizable插件拖拽事件与点击事件冲突问题
Vue.Draggable
SortableJS/Vue.Draggable: Vue.Draggable 是 Sortable.js 的 Vue.js 封装组件,提供了拖放排序功能,可以在 Vue 应用中轻松实现列表元素的可拖拽重排。
项目地址:https://gitcode.com/gh_mirrors/vu/Vue.Draggable

·
问题描述
提示:当拖拽img标签时,img的点击事件被触发,导致拖拽后菜单列表被打开
<div class="menus" v-if="menuOpen">
菜单列表
</div>
<div class="drag">
<vue-draggable-resizable
:w="80"
:h="94"
:y="dragY"
:parent="true"
:resizable="false"
:max-width="80"
axis="y"
@dragstop="onDragstop"
@dragging="onDragging"
:prevent-deactivation="false"
>
<img class="navs" v-if="!menuOpen" @click="clickHandler" src="@/assets/images/home/navs.png" alt="" />
<img class="navs" v-else @click="clickHandler" src="@/assets/images/home/navs2.png" alt="" />
</vue-draggable-resizable>
</div>
解决方案:
提示:添加变量判断
onDragstop(x,y) {
//拖拽停止时触发,将menuOpen和flag置为false,200毫秒后flag置为true
this.menuOpen = false
this.flag = false
setTimeout(() => {
this.flag = true
}, 200);
},
onDragging(x,y){
//拖拽过程保持关闭状态
this.menuOpen = false
},
clickHandler(){
//图片点击事件,只有为true才触发
if(this.flag){
this.menuOpen = !this.menuOpen
}
},




SortableJS/Vue.Draggable: Vue.Draggable 是 Sortable.js 的 Vue.js 封装组件,提供了拖放排序功能,可以在 Vue 应用中轻松实现列表元素的可拖拽重排。
最近提交(Master分支:6 个月前 )
431db153 - 2 年前
017ab498 - 3 年前
更多推荐
所有评论(0)