删除对HTML元素的拖动

Remove drag on HTML elements

本文关键字：拖动 元素 HTML 删除      更新时间：2023-09-26

你知道如何点击HTML元素（主要是图像），并在屏幕上拖动它们的"影子版本"吗？

喜欢看堆栈溢出标志吗？如果你点击并拖动它，你可以在屏幕上移动它的深色版本。

所以我的问题是，有没有什么方法可以消除对HTML元素（主要是图像）的拖动？

这是浏览器的一个功能。这是一种使将图像保存到本地硬盘更容易的快捷方式。有三种方法可以修复或解决此行为：

  • 最好的方法是用与图像宽度和高度相同的div替换图像，并将背景图像属性设置为所需的图像。背景是不可拖动的，所以这将完全符合您的要求。为了获得加分，将div的样式设置为display: inline-block;，使其更接近图像行为。

  • 您可以做的下一件最好的事情是使透明div与图像大小相同，并使用绝对定位和z索引将其定位在图像上。这维护起来更混乱，但在布局中实现起来可能更容易。

  • 最后一个选择很糟糕。您只需在页面的某个位置添加以下JavaScript：

    document.getElementById('my-image').ondragstart = function() { return false; };

将"我的图像"更改为图像元素的ID，就完成了。但这个选项是个坏主意，因为它依赖于Javascript，而不是所有浏览器都会启用它。

作为一个脚注，如果你试图阻止你的图像被保存，不要麻烦。无论是否有任何客户端保护，抓取图像都非常容易。

假设，我们应该能够使用CSS user-select属性来实现这一点。然而，浏览器对它的支持是有限的和不规则的。在我的测试中，它阻止了选择文本的外观，但根本没有阻止拖动图像。目前，您需要使用一种变通方法，如使用背景图像，如上所述。

FWIW，应用以下内容来删除正文中所有文本项的可选择性，或将其选择性地与特定选择器一起使用以禁用对特定元素的选择/拖动：

body {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
相关文章：