解决 vue.draggable 拖拽 点击事件失效无效与拖拽事件冲突的问题

draggable 是个非常不错,而且很方便的拖拽组件,但是你在项目中可能会遇到被包裹的拖拽元素对象的点击事件失效的问题,事件冲突了.先看代码示例,再看解决思路及方法.

安装使用:

yarn add vuedraggable

或者

npm i -S vuedraggable

github: https://github.com/SortableJS/Vue.Draggable

 

1. 被拖拽组件的父组件 Warp.vue




解决 vue.draggable 拖拽 点击事件失效无效与拖拽事件冲突的问题_第1张图片

2. 拖拽的组件对象 AppFormItem.vue




解决 vue.draggable 拖拽 点击事件失效无效与拖拽事件冲突的问题_第2张图片

实际应用效果:

解决 vue.draggable 拖拽 点击事件失效无效与拖拽事件冲突的问题_第3张图片

 

重点来了:

解决直接绑定点击事件与拖拽事件冲突,可以使用封装子组件的形式,在子组件触发点击事件,然后在父组件使用子组件触发事件的回调即可.如果你的被拖拽对象上面有很多个元素有绑定事件,那么你需要使用.stop和.prevent修饰符来禁止默认事件和冒泡.

如果你有更好的方法,可留言分享交流.

你可能感兴趣的:(vue,前端,javascript)