问题描述

提示:当拖拽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
	 }
},
GitHub 加速计划 / vu / Vue.Draggable
4
1
下载
SortableJS/Vue.Draggable: Vue.Draggable 是 Sortable.js 的 Vue.js 封装组件,提供了拖放排序功能,可以在 Vue 应用中轻松实现列表元素的可拖拽重排。
最近提交(Master分支:6 个月前 )
431db153 - 2 年前
017ab498 - 3 年前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐