首页 > 其他分享 >img标签 为何每个都要设置 draggable = false?

img标签 为何每个都要设置 draggable = false?

时间:2024-03-01 09:44:22浏览次数:16  
标签:false img 拖动 标签 draggable 拖放

dragable:
默认值为false,可以用于拖拽,但是一个虚拟的。

a标签,img标签默认自带拖拽,(只有chrome,safari可以使用,firefox不支持,ie不支持)

在HTML5中,img标签默认是可拖动的(至少在某些浏览器如Chrome和Safari中)。

当用户尝试拖动图片时,浏览器会根据其默认行为进行处理,例如可能会启动一个文件拖放操作或者执行某种内置的拖放功能。

为了防止这种默认行为,特别是当你不希望网页上的图片被用户意外或无意间拖动时,可以设置draggable属性为false
这样,即使用户尝试拖动该图片,也不会有任何效果。

<img src="image.jpg" draggable="false">

因此,在需要禁用图片拖拽的场景下,通常建议对页面中的每个不需要拖放功能的img标签明确设置draggable="false"

标签:false,img,拖动,标签,draggable,拖放
From: https://www.cnblogs.com/longmo666/p/18046263

相关文章

  • vue中draggable使用记录
    NPM或yarn安装方式yarnaddvuedraggablenpmi-SvuedraggableUMD浏览器直接引用JS方式<scriptsrc="https://www.itxst.com/package/vue/vue.min.js"></script><scriptsrc="https://www.itxst.com/package/sortable/Sortable.min.js"></scri......
  • 在anaconda下labelimg的下载与使用技巧,及rolabelimg的下载
    本文是基于anaconda下关于labelimg和rolabelimg的安装使用,如果事先自己并没有安装好anaconda,可以先安装anaconda。下载好anaconda后,打开其自带的命令行界面(AnacondaPrompt),进入界面之后,我们新建一个虚拟环境,就命名为labelimg2(因为我之前已经安装过一次,为了区分,所以这里加了个2,......
  • ant design vue a-transfer使用vuedraggable穿梭框拖动效果
    npminstall vuedraggable--save vue<template><a-formlayout="vertical"><a-form-itemlabel="模板"><a-transfershow-search:data-source="tableFieldSource"......
  • XSimGCL论文阅读笔记
    Abstract我们提出了一种非常简单的图对比学习方法作为推荐,该方法放弃了无效的图增强,而是使用一种简单而有效的基于噪声的嵌入增强来生成CL的视图Introduction这里介绍以下SimGCL的缺点:除了推荐任务的正向/反向传递外,每个小批内的对比任务还需要两个额外的正向和反向传递,也就是......
  • vue3+elementplus+vuedraggable插件,实现左右拖拽移入,和上下拖拽排序
    先看目标效果(gif由迅捷gif工具制作,使用vscode可以打开gif,进行预览)效果分析1.左右区域,支持拖拽。左侧选项,拖入右边。可以新建大模块,也可以给模块新增一项。2.模块内部,支持拖拽排序,并按照排序,生成一个简单的层级。3.模块名字支持编辑。同时增加表单校验,名字不存在,则无法保存。......
  • MyBatis xml查询,如何可以查询返回boolean类型 ,怎么写,数据存在就返回true,不存在就fals
    您可以在MyBatis的查询方法中,使用COUNT函数查询指定数据是否存在。如果COUNT的返回值为0,表示数据不存在,反之则存在。以下是一个示例:<selectid="dataExists"resultType="boolean">SELECTCOUNT(*)>0ASexistsFROMyour_tableWHEREyour_condition=#......
  • 2024-01-24:用go语言,已知一个n*n的01矩阵, 只能通过通过行交换、或者列交换的方式调整矩
    2024-01-24:用go语言,已知一个n*n的01矩阵,只能通过通过行交换、或者列交换的方式调整矩阵,判断这个矩阵的对角线是否能全为1,如果能返回true,不能返回false。我们升级一下:已知一个n*n的01矩阵,只能通过通过行交换、或者列交换的方式调整矩阵,判断这个矩阵的对角线是否能全为1,如果......
  • 详解img should be PIL Image. Got <class ‘numpy.ndarray‘>
    详解imgshouldbePILImage.Got当使用Python中的PIL(PythonImagingLibrary)库进行图像处理时,有时会遇到如下错误提示:imgshouldbePILImage.Got<class'numpy.ndarray'>。本文将解释该错误的原因和解决方法。问题描述在使用PIL库对图像进行处理时,如果将一个numpy.ndarray类......
  • 使用日志类库log4net.dll出现代码loginfo.IsInfoEnabled等于false的解决办(转)
    按语:   工程进行了裁剪,发现原来的日志功能失效了,调试时发现loginfo.IsInfoEnabled一直为false。后参考下面博客内容修改了log4net.config的文件属性修改,解决问题。===========================================================================在使用wpf开发日志方面......
  • 安装GPU版本Pytorch失败:torch.cuda.is_available()为False
    问题所在检查condalist发现,实际安装的Pytorch为CPU版本(虽然安装时明确指定了cuda版本):上图中可以看出,Pytorch的描述为:py3.9_cpu_0解决办法有可能是因为环境中存在一个叫“cpuonly”的包,导致无法安装GPU版本Pytorch:卸载掉它即可,卸载它时会自动将Pytorch更新为GPU版本:如果......