vue中拖拽事件在FireFox不生效的问题

最新推荐文章于 2024-08-10 18:08:13 发布

kanglinq

最新推荐文章于 2024-08-10 18:08:13 发布

阅读量1.7k

点赞数 1

分类专栏： js 文章标签： vue 拖拽 FireFox

本文链接：https://blog.csdn.net/RLTlove/article/details/88550289

版权

js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

最近需要写一个拖拽的东西，谷歌正常，那天突然看了下firefox，凉凉，无效果。

然后百度发现FireFox需要在拖拽时dragstart事件时给event事件传一个数据

$event.dataTransfer.setData("aaa",null);

然后就可以了，'aaa'是设置的一个属性名

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

kanglinq

关注关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

html5+vue无法拖拽,Vue拖拽排序插件Vuedraggable使用方法详解_心善_前端开发者

weixin_36348080的博客

06-27

939

大家好，最近做的项目要用到拖拽排序，我现在的项目是首先在npm install vuedraggable -S下载下来后，引入插件，在你的vue文件的script标签里面这样引入import draggable from 'vuedraggable'别忘了下面要注册组件components: {draggable},然后就可以在template标签里面使用了{{element.text}}下面贴一...

前端面试题总结（js、html、小程序、React、ES6、Vue、算法、全栈热门视频资源）持续更新

热门推荐

MingL520的博客

07-17

8万+

文档描述本文是关注微信小程序的开发和面试问题，由基础到困难循序渐进，适合面试和开发小程序。并有热点框架（vue react node.js 全栈）前端资源以及后端视频资源和源码并基于前端进阶和面试的需求总结了常用插件和js算法以及html/css和js热点面试题因为csdn不可以有外链所以答案链接在评论区！！！ Vue面试题生命周期函数面试题 1.什么是...

参与评论您还未登录，请先登录后发表或查看评论

js drag事件的最后一次clientX为0

w_____w_____的博客

10-10

775

如图所示，drag事件的最后一次输出（松开鼠标）会跳变为0； //使用dragover阻止 document.addEventListener("dragover", function(event) { // prevent default to allow drop event.preventDefault(); }, false);

可媲美Element Plus Tree组件研发：节点拖拽（上）

felix_alone2012的博客

07-28

826

为自研Tree组件实现节点拖拽功能，实现节点拖拽后的可插入位置识别，下一小节实现节点插入和更新。

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

狼丶宇先森的网络科技空间

05-21

2万+

draggable 是个非常不错,而且很方便的拖拽组件,但是你在项目中可能会遇到被包裹的拖拽元素对象的点击事件失效的问题,事件冲突了.先看代码示例,再看解决思路及方法. 1. 被拖拽组件的父组件 Warp.vue <template> <draggable v-model="sendData.template" class="app-form-items" @change="handleDraggableFormItemChange"> <t.

HTML 设置draggable属性不生效问题。vuedraggable不生效问题

japlus的博客

10-09

4350

HTML设置了 draggable="true"属性的元素无法拖动

vue-拖拽浏览器兼容问题

喜东东的博客

07-09

717

背景：当加上draggable="true"时，会导致火狐拖拽出现问题，会触发dragstart事件，然后mousemove和mouseup监听出现问题。但不会影响Chrome浏览器。解决办法：去掉draggable="true"语句，在火狐中拖拽正常了 demo正确代码： <template> <div class="wrapper"> <div class="moveBox"> <div class="leftDiv">&lt

vuedraggable拖拽失效

最新发布

weixin_34927844的博客

08-10

541

默认情况下，父组件传递的，但没有被子组件解析为 props 的 attributes 绑定会被“透传”。这意味着当我们有一个单根节点的子组件时，这些绑定会被作为一个常规的 HTML attribute 应用在子组件的根节点元素上。当你编写的组件想要在一个目标元素或其他组件外面包一层时，可能并不期望这样的行为。，看完了还不是很能理解我的目录结构是，其中GridItemInnerContainer是用来包裹具体的组件的工具组件，就是在这个组件里面加了inheritAttrs属性，导致拖拽无法生效。

在app.vue中设置了/* 修改滚动条样式 */ ::v-deep ::-webkit-scrollbar { width: 5px; /* 设置滚动条宽度 */ } ::v-deep ::-webkit-scrollbar-thumb { background-color: #ccc; /* 设置滚动条拖动块的颜色 */ } ::v-deep ::-webkit-scrollbar-track { background-color: #f1f1f1; /* 设置滚动条背景颜色 */ }，但是不生效

06-12

如果你使用的是其他浏览器，如 Firefox 或 Edge，需要使用对应的伪元素，如 `::-moz-scrollbar` 或 `::-ms-scrollbar`。其次，需要确认你的样式是否被正确应用。`::v-deep` 选择器是 Vue2 中的语法，用于解决样式...

Vue面试题总结！

weixin_43943532的博客

04-01

3180

面试题总结 1.项目中是您搭建的框架吗？答:是的 2.了解整体项目从头到结束的构建流程吗？答:脚手架创建vue-cli 创建根据项目需求去选择条件选项创建 3.了解Vue2.0与Vue3.0区别吗？答: 1.默认进行懒观察在2.x版本里由于数据过大都会在一开始就创建观察者,这可能会导致一个问题就是在页面载入时造成明显的性能压力. ...

前端面试题总结（js、html、小程序、React、ES6、Vue、全栈）

qianduan666a的博客

07-14

548

前端面试题总结（js、html、小程序、React、ES6、Vue、全栈）文档描述本文是关注微信小程序的开发和面试问题，由基础到困难循序渐进，适合面试和开发小程序。并有热点框架（vue react node.js 全栈）前端资源以及后端视频资源和源码并基于前端进阶和面试的需求总结了常用插件和js算法以及html/css 和js热点面试题 Vue面试题生命周期函数面试题 1.什么是 vue 生命周期 2.vue生命周期的作用是什么 3.第一次页面加载会触发哪几个钩子

vuedraggable遇到的问题

xinxin_csdn的博客

10-15

1768

原因2、draggable组件必须直接包含v-for: draggable包在ul外层就出现了这个问题。原因：外层的父组件使用了vue-draggable-resizable组件封装的可拖拽的弹框组件。二、拖拽后位置未发生变化：@start、@end事件都执行。原因1、draggble绑定的v-mode和下方列表不一致。一、拖拽无效：触发@start事件，但不执行@end方法。

兼容火狐拖拽(项目中遇到的问题)

qq_34507902的博客

11-26

574

dragHandle(e){ //兼容火狐浏览器 e.dataTransfer.setData("index","aaa"); } 不加火狐拖拽无反应谷歌可以 ...

火狐浏览器不能获取 event,解决js报错问题

weixin_30572613的博客

12-02

257

//←的keyCode等于:37 //→的keyCode等于:39 //↑的keyCode等于:38 //↓的keyCode等于:40 function keystoke(obj){ //var e = window.event;//这样在火狐浏览器不兼容,js失效 var e = window.event || ar...

关于拖拽在火狐不生效问题

zs960316的博客

10-24

519

最近在做项目中发现拖拽在火狐不生效，我是用h5拖拽属性实现的拖拽效果，在谷歌上面都能实现拖拽，但是在火狐浏览器下，拖拽失效，最后发现是van-buttton组件在火狐不能拖拽，把组件换成div就可以了。百度了好多方法发现都没有，其中包括在dragstart事件中添加。

el-upload存在的问题

imkaifan的博客

04-01

350

按照el-upload的要求进行上传，比如说你上传了9张照片，那么其实是，每次上传一张，上传了9次如果不想这样就只能自定义上传方式，但是呢，这个时候上传前的钩子其实是不起作用的before-upload这个钩子不起作用，就只能利用on-change这个钩子进行组装数组，牺牲性能，一起选择9次图片，其实是循环了45次 ...

【Vue 项目】使用 vuedraggable 实现拖拽效果时遇到的问题及解决方案总结（允许 el-table 行拖拽、部分元素不允许拖拽、拖拽避免影响文字复制和输入框输入文字）

一个努力学习的程序猿

04-11

2万+

在最近的开发过程中，遇到了关于拖拽排序的功能需求。在这里向大家推荐使用 vuedraggable。

关于拖拽功能在IE11 、Firefox和Safari中不兼容的问题

weixin_34268169的博客

03-08

1234

2019独角兽企业重金招聘Python工程师标准>>> ...

web uploader在Firefox下上传点击无效的解决方法

germy2的专栏

03-05

252

在公司项目中，做一个上传文件的功能，选用了百度的web uploader，按照官网上面的方法，写好之后，在chrome下面没有任何问题，可是在Firefox下面怎么点击都没有效果？官网上的例子在chrome和Firefox上都可以触发。查看官网上的HTML布局如下： <div id="picker" class="webuploader-container"> <d...

VUE2解决div中 v-html不能触发点击事件不生效问题

05-10

在 Vue2 中，使用 v-html 指令动态渲染 HTML 代码时，如果 HTML 代码中包含有点击事件绑定，会出现点击事件不生效的问题。这是因为 v-html 渲染的 HTML 代码会被当做静态内容插入到 DOM 树中，而不会像 Vue 模板中的...