首页 > 其他分享 >阻止vue组件vuedraggable在使用时打开浏览器新标签

阻止vue组件vuedraggable在使用时打开浏览器新标签

时间:2022-12-06 16:44:25浏览次数:58  
标签:vue 浏览器 拖动 draggable vuedraggable 组件 event

前言

浏览器在文字拖动时会打开链接,图片拖动时打开新窗口,这是浏览器的特性。
vue-draggable组件就是需要拖动的,就与这个特性契合了,但大多时候在项目中我们不需要这个特性。

解决方式

需要在使用vue-draggable的vue页面的中禁止这个功能,

/* 阻止浏览器在 vue-draggable组件时拖动 打开新窗口 */
document.body.ondrop = function(event) {
event.preventDefault();
event.stopPropagation();
};

可以放在vue实例生命周期的 created或moutend中,这样就可以在页面创建时用到。

标签:vue,浏览器,拖动,draggable,vuedraggable,组件,event
From: https://www.cnblogs.com/bcodepod/p/16955747.html

相关文章

  • 转 vue中组件的props属性(详)
    别人责备回复的,还是比不责备回复的,好很多倍。就是至少回复了的。工作有自我价值感。vue中组件的props属性(详)https://blog.csdn.net/qq_41579104/article/details/1209974......
  • vue(13)在模板中使用slot插槽排序
    序Slot插槽插槽就是父组件往子组件中插入一些内容。有三种方式,默认插槽,具名插槽,作用域插槽默认插槽就是把父组件中的数据,显示在子组件中,子组件通过一个slot插槽标签显......
  • 创建Vue实例对象,系统地讲解MVVM分层开发
    一、创建Vue实例对象,详解MVVM本节正式进入Vue.js的讲解,首先需要安装Vue.js,安装方式有两种,本节讲解第一种安装方式,即通过CDN安装,这种方式非常简单,只需要在文件中引入CDN网址......
  • vue select组件封装后用v-model
    封装好的组件<styletype="text/css"scoped>.ipt-select-title{color:#6D89AF;flex-shrink:0;font-weight:500;}.ipt-holder{display:flex;f......
  • vue 返回上一个页面
    一、this.$router.go(-1):原页面中的内容会丢失this.$router.go()刷新this.$router.(-1)后退+刷新this.$router(1)前进二、this.$router.back():原......
  • vue2 动态组件19 keep-alive components component exclude include
    <template><divclass="app-container"><h1>App根组件</h1><hr/><button@click="comName='Left'">展示Left</button><button@click="comN......
  • vue 监听滚动事件到某个位置删除或者添加元素
    首先添加监听事件window.addEventListener('scroll',this.handleScroll)事件处理handleScroll(){varscrollTop=window.pageYOffset||document.......
  • VuePress侧边栏写法
    module.exports={title:'标题',description:'描述',themeConfig:{sidebar:[{title:'分组1',......
  • 浏览器文件分片上传,断点续传
    ​PHP用超级全局变量数组$_FILES来记录文件上传相关信息的。1.file_uploads=on/off 是否允许通过http方式上传文件2.max_execution_time=30 允许脚本最大执行时间......
  • 监听浏览器是否切换
    window.addEventListener("visibilitychange",()=>{console.log(document.hidden)isShowToasts.value=!document.hidden});在onMounted里加上上......