如何防止拖拽重影?

htmlweb developmentfront end technology更新于 2024/10/17 5:00:17

默认情况下，所有 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://www.cainiaomax.com/static/images/simply-easy-learning.png" alt = "image">
</body>
</html>

语法

用户可以按照以下语法使用 draggable 属性来阻止拖动重影图像。

<img draggable = "false" src = "URL" alt = "image">

在上述语法中，我们将'draggable'属性与 HTML 'img' 元素一起使用。

示例 2(阻止拖动图像)

在下面的示例中，我们将图像添加到网页。此外，我们在'img'元素中添加了'draggable'属性，并将其值设置为'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() 方法设置图片元素的可拖动属性。

这里，我们将"draggable"作为"setAttribute"方法的第一个参数，将"false"作为第二个参数传递。

<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() 方法将 draggable 属性设置为 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>

我们学习了如何防止网页上出现拖拽重影图像。我们使用了"draggable"属性来实现这一目标。在第3个和第4个示例中，我们使用JavaScript和JQuery为图像元素设置了draggable属性。

用户可以在任何HTML元素上使用draggable属性来防止该元素被拖拽。