如何使图像在 HTML 中可拖动？
原创
在网页中创建可拖动元素的能力是 HTML5 为 Web 开发人员提供的新功能和技能之一。它成为一项非常流行和广泛使用的功能。它只是意味着通过使用光标将图片拖动到另一个位置来将图片移动到另一个位置。通过使用鼠标或触摸动作，用户将能够在页面上拖动图像或其他内容。在本文中，我们将了解如何在 HTML5 中构建可拖动的图像。
使任何 HTML5 元素（包括照片）都可拖动很简单。使用了“可拖动”功能。它接受 true、false 或 auto 等参数。Auto 是默认值。浏览器确定属性是否可拖动。如果该值设置为 true，则图像是可拖动的。如果该值设置为 false，则图片不可拖动。
html 中的 draggable 属性
draggable 属性指示是否可以移动元素。在拖放操作中，通常采用可拖动特性。可以将此属性添加到标签中，例如 <p> 标签
语法
<elementTag draggable=“true|false|自动”>属性值
- true − 表示可拖动的 true
- false − 表示可拖动的 false
方法
我们通过两种方法提供了解决方案：
- 使用没有 CSS 的简单 HTML。
- 将 HTML 与 CSS 结合使用。
让我们研究一下这两种方法：
方法 1：使用没有 CSS 的简单 HTML
算法
给定问题的算法：
- 第 1 步 - 对于html 5，请使用<！DOCTYPE html>
- 第 2 步 - 创建头部和身体标签。
- 第 3 步 - 为标题放置标题 h1 标签
- 第 4 步 - 创建一个带有 src 属性的 img 标签，提供图像地址。alt 属性在无法加载图像时显示备用消息。
- 第 5 步 - 要使图像可拖动，请使用 draggable 属性并将其设置为 true。
例
<！DOCTYPE html> <html lang=“en”> <body> <h1>下面的图片可以拖动</h1 > <img src=”https://www.tutorialspoint.com/python_pillow/images/tutorials_point.jpg “ alt=”image“ draggable=”true“/> </body> </html>方法 2：将 HTML 与 CSS 结合使用
我们可以使用内部 CSS 来设置 HTML 页面的样式。任何 HTML 页面的样式都是使用内部 CSS 建立的。HTML 页面的 <head> 部分中的 <style> 元素包含内部 CSS 的定义。
在媒体查询中，@media规则用于为各种媒体类型和设备应用各种样式。许多项目可以通过媒体查询进行检查，包括视口的宽度和高度也取决于设备的方向（平板电脑或手机是处于横向模式还是纵向模式？将自定义样式表（响应式 Web 设计）发送到笔记本电脑、平板电脑、台式机和移动电话的常用方法是使用媒体查询。此外，还可以使用媒体查询来声明特定样式只能用于印刷材料或屏幕阅读器（媒体类型：打印、语音或屏幕）。
算法
给定问题的算法：
- 第 1 步 - 对于 HTML 5 <！DOCTYPE html> 被使用。
- 第 2 步 - 创建头部和身体标签。
- 第 3 步 - 为 css 创建样式标签，并为页面添加样式以获得视觉外观。
- 第 4 步 - 为标题放置标题 h1 标签。
- 第 5 步 - 创建一个带有 src 属性的 img 标签，提供图像的地址。alt 属性在无法加载图像时显示备用消息。
- 第 6 步 - 要使图像可拖动，请使用可拖动属性并将其设置为true。
- 第 7 步 - 利用媒体查询来更改图像宽度，就像移动尺寸一样。
例
<！DOCTYPE html> <html lang=“en”> <head> <style> .image{ margin：auto; 显示：块; text-align：居中; } h1{ 颜色：紫色; } img{ 边框半径： 10%; 边框：实心 1px; 宽度：300px; } /* 对于手机，添加媒体查询并将宽度设置为 200px： */ 仅@media屏幕和 （max-width： 768px） { img{width：200px; }} </style> </head> <body> <div class=“image”> <h1>下面的图片可以拖动 </h1 > <img src= “https://www.tutorialspoint.com/python_pillow/images/tutorials_point.jpg ” alt=“image” draggable=“true”/> </div> </body> </html> 注意 - 默认情况下，链接和图像可以移动。也就是说，默认情况下它们是可拖动的。
结论
本文提供了一种基于 Java 编程语言的解决方案，用于查找和报告数组中所有重复数字及其频率的问题。对于这个问题，两种不同的策略已被证明是有效的。第一种方法使用 HashMap 数据结构计算每个值的频率，而第二种方法使用带有 ArrayList 的嵌套循环来计算。通过了解和应用这两种方式，您可以更好地在未来的编码面试中解决类似的编程问题。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。