数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何在 HTML 中使图像可拖动？
在网页中创建可拖动元素的能力是 HTML5 为 Web 开发人员提供的新功能和技能之一。它变得非常流行和广泛使用。它只是意味着通过用光标将其拖到那里来将图片移动到另一个位置。通过使用鼠标或触摸动作，用户将能够在页面周围拖动图像或其他内容。在本文中，我们将了解如何在 HTML5 中构建可拖动图像。
使任何 HTML5 元素（包括照片）可拖动都很简单。使用“draggable”属性。它接受 true、false 或 auto 作为参数。Auto 是默认值。浏览器确定属性是否可拖动。如果将值设置为 true，则图像可拖动。如果将值设置为 false，则图像不可拖动。
html 中的 draggable 属性
draggable 属性指示元素是否可以四处移动。在拖放操作中，通常使用 draggable 属性。此属性可以添加到诸如 <p> 标签之类的标签中。
语法
<elementTag draggable=”true|false|auto”>
属性值
true − 表示可拖动为真
false − 表示可拖动为假
方法
我们提供了两种方法的解决方案：
使用简单的 HTML 而无需 CSS。
使用带有 CSS 的 HTML。
让我们深入了解这两种方法：
方法 1：使用简单的 HTML 而无需 CSS
算法
给定问题的算法：
步骤 1 − 对于 html 5 使用 <!DOCTYPE html>
步骤 2 − 创建头部和主体标签。
步骤 3 − 为标题放置 h1 标签。
步骤 4 − 创建一个 img 标签，其 src 属性提供图像的地址。alt 属性在图像无法加载时显示备用消息。
步骤 5 − 要使图像可拖动，请使用 draggable 属性并将其设置为 true。
示例
<!DOCTYPE html> <html lang="en"> <body> <h1>Image below can be dragged</h1> <img src=" https://tutorialspoint.com/python_pillow/images/tutorials_point.jpg " alt="image" draggable="true"/> </body> </html>
方法 2：使用带有 CSS 的 HTML
我们可以使用内部 CSS 来设置 HTML 页面的样式。使用内部 CSS 为任何 HTML 页面建立样式。HTML 页面 <head> 部分中的 <style> 元素包含内部 CSS 的定义。
在媒体查询中，@media 规则用于为不同的媒体类型和设备应用不同的样式。媒体查询可以检查许多项目，包括视口的宽度和高度，还取决于设备的方向（平板电脑或手机是横向还是纵向模式？）。使用媒体查询发送自定义样式表（响应式网页设计）到笔记本电脑、平板电脑、台式机和手机的常用方法。媒体查询还可以用于声明特定样式仅应与打印材料或屏幕阅读器一起使用（mediatype：打印、语音或屏幕）。
算法
给定问题的算法：
步骤 1 − 对于 HTML 5 使用 <!DOCTYPE html>。
步骤 2 − 创建头部和主体标签。
步骤 3 − 创建一个 style 标签用于 css 并为页面添加样式以进行视觉外观。
步骤 4 − 为标题放置 h1 标签。
步骤 5 − 创建一个 img 标签，其 src 属性提供图像的地址。alt 属性在图像无法加载时显示备用消息。
步骤 6 − 要使图像可拖动，请使用 draggable 属性并将其设置为 true。
步骤 7 − 使用媒体查询更改图像宽度，例如移动设备尺寸。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.image{
margin:auto;
display: block;
text-align: center;
}
h1{
color:purple;
}
img{
border-radius: 10%;
border: solid 1px;
width:300px;
}
/* For mobile phones add media query and set width to 200px: */ @media only screen and (max-width: 768px) {
img{width:200px;
}}
</style>
</head>
<body>
<div class="image">
<h1>Image below can be dragged</h1>
<img src= "https://tutorialspoint.com/python_pillow/images/tutorials_point.jpg " alt="image" draggable="true"/>
</div>
</body>
</html>
注意 − 默认情况下，链接和图像可以四处移动。也就是说，它们默认情况下是可拖动的。
结论
本文提供了一种基于 Java 编程语言的解决方案，用于解决查找和报告数组中所有重复数字以及它们的频率的问题。针对此问题，已经展示了两种不同的方法。第一种方法使用 HashMap 数据结构计算每个值的频率，而第二种方法使用带有 ArrayList 的嵌套循环来实现。通过了解和应用这两种方法，您可以在未来编码面试中更好地应对类似的编程问题。
1K+ 次查看
