@(工作笔记)

vuedraggable-record

[TOC]

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

https://blog.csdn.net/qq_33270001/article/details/106264832

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

安装使用:

yarn add vuedraggable 或者

npm i -S vuedraggable github: https://github.com/SortableJS/Vue.Draggable

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

        </app-form-item>
    </template>
</draggable>

</template>

实际应用效果:

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

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

网友的其它解决方案分享留言: qq_34854119:这个拖动插件有一个属性distance, 默认值是0, 把点击事件识别成了拖动事件了, 如果把它的值设置成>0的数, 自己的组件就可以响应点击事件了.

1.这个拖动插件有一个属性distance, 默认值是0, 把点击事件识别成了拖动事件了, 如果把它的值设置成>0的数, 自己的组件就可以响应点击事件了