H5 图片禁止拖拽

已于 2022-03-10 13:54:59 修改
阅读量940 收藏 1
点赞数 1
分类专栏： H5 文章标签： html
于 2022-03-09 09:37:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/linyisonger/article/details/123369269
版权

一开始通过css样式，即可禁止图片的拖拽，没有成功。 ≧ ﹏ ≦

于是另辟道路

找到draggable这个H5新增的属性

非常方便~

属性说明

https://www.runoob.com/tags/att-global-draggable.html

图片禁止拖拽
<img src="https://picsum.photos/360/460?random=1" draggable="false">
林一怂儿
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
使用css代码防止图片被拖拽的教程
11-23 962
在网页中，我们经常使用图片来美化页面或辅助内容呈现，但有时用户会无意中拖拽图片，这会对页面布局或其他元素产生意想不到的影响。为了防止这种情况，我们可以使用CSS来禁止。总体来说，禁止图片被拖拽或复制可以让我们更好地控制网页的布局和展示效果，提高用户体验和页面质量。如上面的代码所示，我们可以使用用户拖拽相关的CSS属性来实现禁止图片拖拽的效果。属性也分别对应不同的浏览器厂商，用于防止图片被选中并复制。如果希望同时禁止图片被复制，我们可以使用。属性分别对应不同的浏览器厂商。
h5页面ios，双击向上滑动，拖拽到底部还能继续拖拽
qq_43592064的博客
04-27 2631
在ios下，双击屏幕某些地方，滚动条会自动向上走一段。 当用微信看h5的时候，拖拽到底部，会漏出来，微信自带下面的灰黑色皮肤。 用js解决一下吧，这俩问题很类似，总结到一起了。 ----------特别注意，安卓没有发生过这些情况，因为解决办法是给最外层的wrapper，overflow-y:auto;也就是放弃了原生的滚动条，所以解决的时候要判断一下系统，安卓就不用处理了。 html部分：---...
ios上禁止图片拖拽和长按操作
dzry_lr的博客
12-29 738
使用css属性完美解决。
HTML禁止图片被拖拽
weixin_50380723的博客
12-15 4584
禁止图片被拖拽 一般的图片可以通过鼠标拖拽进行复制粘贴，同时拖拽过程中会出现虚化的图片 如图 解决方法 方法一：设置draggable="false" <img src="./a.jpg" draggable="false"> 方法二：通过javascript禁止 <img id="a" src="./a.jpg"> <script> document.getElementById("a").onmousedown = function(e){ e
html5设置图片无法拖动,HTML5之Drag(图片的来回拖动)
weixin_34811804的博客
06-04 162
#div1,#div2, #div3{width: 488px;height: 70px;padding: 10px;border: 1px solid #aaaaaa;}function allowDrop(ev) { //阻止默认的链接形式拖动ev.preventDefault();}function drag(ev) { //设置要拖到哪儿ev.dataTransfer.setData("...
移动端h5中禁止双指缩放拖曳
最新发布
weixin_45346457的博客
03-27 464
1、在index.html中，
在线h5图片标注源码
11-11
在线H5图片标注源码是一种轻量级的Web应用程序，它允许用户在浏览器环境中对图片进行标注和编辑。这个程序的核心技术是HTML5的Canvas元素，这是一个强大的绘图工具，可以用于在网页上动态绘制图形。以下是关于这个...
h5，video禁止拖动进度条，禁止快进
03-24
利用jq简单控制h5视频播放进度条，让使用者不能快进，可以后退。原理是每500毫秒记录一次进度条时间，如果下一个500毫秒的进度减去上一个500毫秒的进度大于1秒，那么就让视频返回到上一个进度，因项目开发中对于视频...
h5拖动图片验证码js插件
06-15
此插件使用h5的cancas画布，最终封装为jquery插件，因为canvas有跨域问题查看效果请启动server 访问，不要使用文件系统（file:///C:/Users/）访问，使用方式如下： $("#captcha").imgVerifyCode({ imgPath: ...
vue h5移动端禁止缩放代码
10-16
今天小编就为大家分享一篇vue h5移动端禁止缩放代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
H5页面禁用微信浏览器下拉
12-07
H5页面禁用微信浏览器下拉,使其下拉不会出现黑色来源显示，在JS文件中定义此方法即可。
前端H5图片预览，PC 手机端通用
07-12
在开发Web应用时，前端H5图片预览功能是一个常见的需求，无论是在PC端还是移动端。这个主题主要涉及如何在HTML5环境下实现图片的预览，确保在不同设备上具有良好的兼容性和用户体验。"viewer.js"是一个常用的轻量级...
h5 ios 禁用长按选择图片_html5和CSS 实现禁止IOS长按复制粘贴功能
weixin_27697385的博客
01-13 797
这篇文章主要介绍了关于html5和CSS 实现禁止IOS长按复制粘贴功能，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下因为在移动端APP需要实现长按执行别的事件，但是在iOS系统有默认的长按选择复制粘贴。禁止在网上找了很多资料，下面小编给大家分享解决方案，一起看看吧因为在移动端APP需要实现长按执行别的事件，但是在iOS系统有默认的长按选择复制粘贴，禁止此功能在网上找了很多资料，最...
html页面禁止右键、禁止复制、禁止图片拖动、禁止复制和剪切&禁止IOS长按复制粘贴实现
未来以来 futureToday
05-25 4201
html实现 页面禁止右键 禁止复制 禁止图片拖动 禁止复制和剪切 众所周知，一般的屏蔽的方法是用JS来编写的脚本，但是也可以直接通过修改网页属性的方法来屏蔽右键 禁止复制。 禁止右键 oncontextmenu=&quot;return false&quot; 禁止复制和剪切： oncopy=&quot;return false;&quot; oncut=&quot;return false;&quot; 禁止复制 onselects..
h5 ios 禁用长按选择图片_h5移动端禁止长按图片保存
weixin_39606003的博客
12-23 5732
在移动端访问H5页面的时候，长按图片就会把图片保存起来，为了能够让用户体验更好一些，我们需要长按的时候也不保存图片。那该如何实现呢？下面给出3种解决方案。方案一：使用 pointer-events:noneimg{pointer-events:none;}亲测有效，适用于微信客户端的手机页面，图片被打开的情况.方案二：全局属性*{-webkit-touch-callout: none;-webki...
记一次WEB、移动端（安卓、IOS）h5页面禁止禁用复制、选中
Tany的博客
01-04 4181
记一次WEB、移动端（安卓、IOS）h5页面禁止禁用复制、选中背景初次上线寻求解决方案 背景 由于本人工作单位性质问题（新闻单位），元旦期间接到领导紧急要求将一篇文章禁止选中和复制，当我拿到需求的时候，原以为是很简单的几个件事处理即可解决问题，虽然本屌一直从事后端工作，但也觉得这种事情不在话下，随口答应1小时后即可上线。 当我说出这句话的时候，就很明显，事情没有这么简单。具体情况下如： 初次上线 我认为这种需求，简单的找个博客复制粘贴即可解决问题，紧急处理一篇文章嘛，领导也说了直接把ID写死即可，后期再安排
【JavaScript】禁止拖拽图片的最简单方式
harmsworth的博客
06-24 4321
【JavaScript】禁止拖动图片的最简单方式
移动端H5页面阻止图片和文字被选中
weixin_34235135的博客
02-28 710
H5页面设置图片和span标签等不可选中 1.阻止span标签等文字被选中 在对应元素的CSS样式中加 -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; -khtml-user-select: none; user-select: n...
移动端/h5禁止页面拖动
qq_42768522的博客
09-09 1832
移动端/h5禁止页面拖动
h5页面禁止复制
05-28
要禁止h5页面的复制，可以通过以下几种方式实现： 1. 使用CSS样式禁止文本选择和拷贝： ``` -webkit-user-select: none; /* Chrome/Safari/Opera */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version, currently not supported by any browser */ ``` 2. 使用JavaScript禁止鼠标右键菜单和复制： ``` document.addEventListener('contextmenu', event => event.preventDefault()); document.addEventListener('copy', event => event.preventDefault()); ``` 3. 使用禁止复制插件，如NoCopy插件，在页面中引入该插件即可实现禁止复制的功能。 需要注意的是，以上方式均可以被绕过，因此不是绝对安全的保护措施。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

林一怂儿

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值