1

您知道如何单击 HTML 元素（主要是图像），然后将它们的“影子版本”拖到屏幕上吗？

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

所以我的问题是，有什么办法可以去掉 HTML 元素的拖拽，主要是图片？

4

2 回答 2

6

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

  • 最好的方法是将图片替换为与图片具有div相同宽度和高度的图片，并将 background-image 属性设置为您想要的图片。背景不可拖动，因此这将完全符合您的要求。对于奖励积分，将 div 的样式设置display: inline-block;为使其更接近于模仿图像行为。

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

  • 最后的选择很烂。您只需将以下 JavaScript 添加到您的页面某处：

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

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

作为脚注，如果您试图阻止保存图像 - 不要打扰。在有或没有任何客户端保护的情况下，抓取图像都非常容易。

于 2012-09-14T19:51:48.713 回答
1

假设，我们应该能够使用 CSSuser-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;
}
于 2012-09-14T19:57:46.217 回答