阻止图片拖拽的时候弹出下载框(图片拖拽下载)

已于 2022-11-09 19:55:26 修改
阅读量2k 收藏 1
点赞数 2
分类专栏： css 文章标签： 360/搜狗/QQ兼容模式下 火狐，ie11，edge 图片拖拽 出现图片下载弹框 新窗口打开图片
于 2020-10-29 10:55:00 首次发布

最近项目中做到一个图片拖拽的需求，但是谷歌下没有问题，火狐，360/搜狗/QQ兼容模式下，ie11，edge等浏览器下拖拽图片的时候，要么弹出下载图片的提示框，要么直接新窗口打开图片，于是，我搭档不知道在哪找了个解决方法，我顺带记下来，方便下次用...

具体如下：

//在img标签中加如下属性就好
draggable="false"

代码实现可参照如下：

笑到世界都狼狈
关注
专栏目录
禁止浏览器拖动图片进行下载
ch_scofield的专栏
06-13 3782
<br /> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /> <html xmlns="http://www.w3.org/1999/xhtml"><br /> <head><br /> <title>禁止鼠标拖动图片</title><br /> <style type="te
阻止 qq 浏览器等浏览器的图片拖拽导致的下载事件
obf13的博客
04-25 725
阻止 qq 浏览器等浏览器的图片拖拽导致的下载事件 项目过程中测试发现在部分浏览器中，图片的拖拽会导致下载事件。 但我原本图片确实要实现放大后拖拽的功能，解决方式如下，需要在拖拽的图片容器中移除默认事件。 <div onDragEnter={(e: any) => e.preventDefault()} onDragOver={(e: any) => e.preventDefault()} > <img></img> </div> ..
JavaScript禁止右击保存图片,禁止拖拽图片的实现代码
10-15
主要介绍了JavaScript禁止右击保存图片,禁止拖拽图片的实现代码,代码简单易懂，非常不错，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
html中设置图片不允许拖拽下载
热门推荐
李欢欢的博客
11-03 1万+
1. 问题描述 在浏览器中,常见的一种行为就是:选中-拖拽-新页面打开,例如百度搜索就是这样.但是我现在不想让别人在我的个人网页上选中,也不想让他人拖拽我的照片,要怎么做呢? 2. 问题解决 &amp;lt;body ondragstart=&quot;window.event.returnValue=false;return false;&quot; oncontextmenu=&quot;window.event.returnV...
css样式：禁用文字选中状态,禁止图片拖动
最新发布
晚风的博客
11-22 616
【代码】css样式：禁用文字选中状态,禁止图片拖动。
php让图片弹出下载框的方法
liuquan007的博客
08-15 459
$filename = "1.jpg";//图片地址,可以绝对地址也可以相对地址 header("Content-Type: application/force-download"); header('Content-Disposition: attachment; filename="'.$filename.'"'); $img = file_get_contents($fil
flash助手_怎样一键下载网站所有图片？图片助手，下载图片就是这么简单
weixin_39638105的博客
11-06 481
有一些朋友因为工作需要或者个人爱好，总是需要下载各种图片，比如壁纸啦、设计素材啦，有时候耗费大量时间终于在网页里找到了。下载图片很简单，或者右键另存为，或者直接拖到桌面，但是这只适合几张图片的下载，如果一个页面上有几十兆，甚至几百兆上千张的图片，显然用鼠标来一张一张下载太慢了，有没有办法快速下载呢？当然有的，小迷虫可是一直使用的这种批量下载图片的方法呢，这个方法就是浏览器配合插件：图片助手，就可以...
基于vue-simplemde实现图片拖拽、粘贴功能
08-27
在实现图片上传时，需要判断用户拖动的文件类型是否为图片，如果不是图片，则弹出警告信息。可以使用 `e.dataTransfer.files` 来获取用户拖动的文件列表，并使用 `for` 循环来遍历文件列表，判断文件类型是否为图片...
js实现图片放大和拖拽特效代码分享
10-23
传统的图片放大功能一般依赖于图片点击事件后，通过JavaScript控制新弹出的图片展示窗口的大小来实现，但这种方式的用户体验并不算最佳。而通过将鼠标滚轮事件也纳入到控制中，用户则可以更加直观和流畅地控制图片的...
JS实现的简单拖拽购物车功能示例【附源码下载】
10-18
- `top_`函数：弹出提示框获取用户输入的购买数量，返回这个输入值。 #### 5. JavaScript事件处理函数 - **dragstart事件处理函数**：设置`dataTransfer`对象的`setData`方法，为拖拽的商品设置必要的数据，比如...
javascript拖拽图片到指定位置
08-14
javascript拖拽图片到指定位置 。。。。。。。。。。。。。。。。。。。
java实现在JFrame窗口进行图片拖拽
08-02
java实现在JFrame窗口进行图片随意拖拽
html拖拽调图片顺序,关于H5实现微信长按图片拖动调整顺序
weixin_36106852的博客
06-07 1202
当你明白功能的实现逻辑的时候，往往实现的过程中会给你带来惊喜，所以先去明确功能的实现逻辑，剩下的事情会水到渠成比如这个功能，开始的时候我是这样想的，第一张图片的左侧中点作为左侧触发边界点，右侧中点作为右侧触发边界点，当第一张图片的右侧边界点拖动到第二张图片的右半部分时，将第二张图片移动到左边，并交换两张图片的index和位置。当第二张图片的左侧边界点拖动到第一张图片的左半部分时，将第一张图片移动到...
禁止浏览器拖拽页面的图片
macangyewangs的博客
09-18 925
<body ondragstart="return false"></body> // 在页面的body上加上这行代码 ondragstart="return false //（vue项目直接在index.html 的body加上这行代码即可.html页面需要在每个页面加上）
阻止360浏览器拖拽链接打开新的页面
这是我的博客
11-27 4047
阻止360浏览器拖拽链接打开新的页面
去掉IE浏览图片当鼠标放到图片上时出现快捷工具（打印、邮寄、另存等）
roguish的专栏
04-19 941
去掉用IE6.0浏览图片，当鼠标放到图片上时出现快捷工具（打印、邮寄、另存等）方法一：方法二：定义CSS：img {nobar:expression(this.galleryImg=no)}
vue中拖拽事件在FireFox不生效的问题
RLTlove的博客
03-14 1803
最近需要写一个拖拽的东西，谷歌正常，那天突然看了下firefox，凉凉，无效果。 然后百度发现FireFox需要在拖拽时dragstart事件时给event事件传一个数据 $event.dataTransfer.setData("aaa",null); 然后就可以了，'aaa'是设置的一个属性名 ...
【vue Draggable(拖拽)插件在火狐浏览器的坑】
wzgsmile1208的博客
07-09 1885
vue Draggable 在Firefox拖拽时的默认搜索问题 Firefox有默认的拖动搜索事件，在使用vuedraggable组件时拖动成功后会打开一个新的搜索标页签 例: 解决方案: 初始化阻止Firefox的默认拖拽搜索行为 created() { document.body.ondrop = function(event) { event.preventDefault(); event.stopPropagation(); }; }, ...
html5拖放原理,Html5原生拖拽操作
weixin_36016360的博客
05-30 464
最近的一次项目开发中用到了H5的拖拽功能，由于现有项目使用的是VUE全家桶，使用了vuedragable这个插件，但是整个过程是比较痛苦的。遂决定从H5拖拽的原理开始研究，然后再将其应用到数据驱动的框架中。在H5中要想实现拖放操作，至少需要经过两个步骤：1) 将想要拖放的对象元素的draggable属性设为true(img与a元素默认允许拖放)；2) 编写与拖放相关的事件处理代码。为了测试简便，我...
评论 10
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值