HTML无拖动图片 - Html

介绍

在网页中，有时需要使用图片进行展示。但是在使用图片时，部分用户可能会试图拖动图片来移动或者保存图片，这会影响用户体验。

本篇介绍如何使用HTML代码来禁止用户在网页中拖动图片。

实现步骤

使用CSS禁止图片拖动

通过设置user-select和-webkit-user-drag样式来禁止用户拖动图片。具体代码如下：

<style>
  img {
    user-select: none;
    -webkit-user-drag: none;
  }
</style>

使用HTML ondragstart 事件禁止拖动

通过添加ondragstart事件和设置return false来达到禁止拖动的效果。具体代码如下：

<img src="example.jpg" ondragstart="return false;"/>

注意事项

本方法只能禁止用户直接拖动图片，但是用户仍然可以通过右键保存图片等方式来获取图片。因此，为了保护图片，可以使用下面提到的方法：使用图片水印替代原始图片。

使用图片水印替代原始图片

使用图片水印可以有效的防止别人盗取你的图片，并且提供更好的版权保护，因此也是一个常用的保护图片的方法。

具体步骤：

1. 使用一张带有版权信息的图片；

2. 通过一个图形工具，添加图片水印（例如Photoshop）；

3. 在网页中调用水印图片。

<img src="example-watermark.jpg"/>

结论

在网页中使用图片时，为了保护图片版权的安全，请对图片进行加水印处理或者禁止拖动图片。

参考资料

1. user-drag

2. user-select

3. 禁止网页中图片拖放