博客

如何使用JavaScript/jQuery禁止从HTML页面拖动图片

  • Post category:jquery

如果想禁止从HTML页面拖动图片，可以通过JavaScript或jQuery进行相应设置。

通过JavaScript禁止从HTML页面拖动图片

实现禁止拖动图片的方法是通过在拖动事件中阻止默认行为。代码如下：

// 获取所有img元素
var images = document.querySelectorAll("img");

// 循环给每个img元素绑定拖动事件
for (var i = 0; i < images.length; i++) {
  images[i].addEventListener("dragstart", function (event) {
    // 阻止默认行为
    event.preventDefault();
  });
}

以上代码中，我们首先使用querySelectorAll()方法获取页面上的所有img元素，然后循环给每个img元素绑定拖动事件。当用户拖动某个图片时，会触发dragstart事件，我们在事件的回调函数中使用preventDefault()方法阻止默认行为，从而实现禁止拖动图片的效果。

通过jQuery禁止从HTML页面拖动图片

使用jQuery禁止图片拖动的代码也非常简洁，示例如下：

// 给所有img元素添加禁止拖动属性
$("img").attr("draggable", "false");

以上代码中，我们使用jQuery的attr()方法将所有img元素的draggable属性设置为false，这样就禁止了从HTML页面拖动图片。

示例说明

我们可以在下面的HTML代码中嵌入以上两种方法中的一种或两种，来观察不同的结果。

<!DOCTYPE html>
<html>
  <head>
    <title>禁止拖动图片</title>
    <meta charset="utf-8" />
    <script>
      // JavaScript代码
      window.addEventListener("load", function () {
        var images = document.querySelectorAll("img");
        for (var i = 0; i < images.length; i++) {
          images[i].addEventListener("dragstart", function (event) {
            event.preventDefault();
          });
        }
      });

      // jQuery代码
      $(function () {
        $("img").attr("draggable", "false");
      });
    </script>
  </head>
  <body>
    <img src="https://picsum.photos/200/300" />
    <img src="https://picsum.photos/200/300" />
    <img src="https://picsum.photos/200/300" />
  </body>
</html>

上面的代码中，我们使用了两种禁止拖动图片的方法：JavaScript和jQuery。当加载页面时，会执行以上代码中的两个部分，分别是通过JavaScript和jQuery禁止图片拖动。我们可以在页面上拖动这三张图片，观察是否有禁止效果。

Tags: