数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何防止幽灵图像拖动？
默认情况下，我们可以通过点击所有 HTML 元素来拖动它们。但是，用户不应该能够拖动不可拖动的元素。否则，他们将无法区分可拖动和不可拖动的元素，因为所有元素都是可拖动的。
网页上的图像也可以拖动。在本教程中，我们将学习防止幽灵图像拖动的各种方法。
示例 1（拖动图像）
在本示例中，我们将图像添加到网页中。此外，我们使用 CSS 设置了图像的尺寸。在输出中，用户可以尝试拖动图像并观察图像是否可拖动。
<html>
<head>
<style>
img { width: 300px; height: 300px;}
</style>
</head>
<body>
<h2> Dragging the <i> images </i> in HTML5 </h2>
<img src = "https://tutorialspoint.com/static/images/simply-easy-learning.png" alt = "image">
</body>
</html>
语法
用户可以按照以下语法使用可拖动属性来防止拖动幽灵图像。
<img draggable = "false" src = "URL" alt = "image">
在以上语法中，我们使用了带有 HTML 'img' 元素的“可拖动”属性。
示例 2（防止拖动图像）
在下面的示例中，我们将图像添加到网页中。此外，我们在“img”元素中添加了具有“false”值的“可拖动”属性。
在输出中，用户可以尝试拖动图像并观察图像是否不可拖动。
<html>
<head>
<style>
img {width: 300px;height: 300px;}
</style>
</head>
<body>
<h2> Preventing the dragging the <i> images </i> in HTML5 </h2>
<img draggable = "false" src = "https://d3mxt5v3yxgcsr.cloudfront.net/courses/3187/course_3187_image.jpg" alt = "image">
</body>
</html>
示例 3（使用 JavaScript 防止拖动图像）
在本示例中，我们使用 JavaScript 来防止拖动幽灵图像。在 JavaScript 中，我们访问图像元素，并使用 setAttribute() 方法为图像元素设置可拖动属性。
在这里，我们将“可拖动”作为第一个参数，将“false”作为“setAttribute”方法的第二个参数传递。
<html>
<head>
<style>
img {width: 300px;height: 300px;}
</style>
</head>
<body>
<h3> Preventing the dragging the <i> images </i> in HTML5 using JavaScript </h3>
<img src = "https://d3mxt5v3yxgcsr.cloudfront.net/courses/3187/course_3187_image.jpg" alt = "image">
<script>
var img = document.getElementsByTagName('img')[0];
// add draggable = false to the image
img.setAttribute('draggable', false);
</script>
</body>
</html>
示例（使用 JQuery 防止拖动图像）
在下面的示例中，我们使用 JQuery 来防止在网页上拖动幽灵图像。在这里，我们使用标签名称访问图像元素，并使用 attr() 方法将可拖动属性设置为 false 值。在输出中，我们可以看到我们无法拖动图像。
<html>
<head>
<style>
img {
width: 300px;
height: 300px;
}
</style>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"> </script>
</head>
<body>
<h3> Preventing the dragging the <i> images </i> in HTML5 using jQuery </h3>
<img src = "https://d3mxt5v3yxgcsr.cloudfront.net/courses/1895/course_1895_image.png" alt = "image">
<script>
// adding draggable attribute to the image using JQuery
$("img").attr("draggable", "false");
</script>
</body>
</html>
我们学习了如何防止幽灵图像在网页上拖动。我们使用“可拖动”属性来实现我们的目标。在第 3 和第 4 个示例中，我们使用 JavaScript 和 JQuery 为图像元素设置可拖动属性。
用户可以将可拖动属性与任何 HTML 元素一起使用，以防止拖动该元素。
更新于： 2023年7月26日
870 次浏览
广告