是否有一种方法可以防止用户看到他们试图拖动的图像的幽灵(不是关心图像的安全性,而是体验)。
我已经尝试了这个,它修复了文本和图像上的蓝色选择的问题,但不是幽灵图像:
img {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
(我也尝试用同样的规则嵌套div内的图像)。 谢谢
是否有一种方法可以防止用户看到他们试图拖动的图像的幽灵(不是关心图像的安全性,而是体验)。
我已经尝试了这个,它修复了文本和图像上的蓝色选择的问题,但不是幽灵图像:
img {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
(我也尝试用同样的规则嵌套div内的图像)。 谢谢
当前回答
我发现,对于IE,你必须添加draggable="false"属性的图像和锚,以防止拖动。CSS选项适用于所有其他浏览器。我用jQuery做了这个:
$("a").attr('draggable', false);
$("img").attr('draggable', false);
其他回答
将图像作为空div的背景,或在透明元素下。当用户单击要拖动的图像时,他们是在单击一个div。
参见http://www.flickr.com/photos/thefella/5878724253/?f=hp
<div id="photo-drag-proxy"></div>
//禁用图像拖动
$(document).on("dragstart", function (e) {
e.preventDefault();
});
这需要jQuery。这可以防止拖拽任何文本或img。将文档替换为您想要阻止拖动的任何元素。
我想你可以改变你的
img {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
成一个
img {
-webkit-user-drag: none;
-khtml-user-drag: none;
-moz-user-drag: none;
-o-user-drag: none;
user-drag: none;
}
document.querySelectorAll("*").forEach((elem) => {
elem.setAttribute('draggable', false)
elem.addEventListener('dragstart', (event) => {
event.preventDefault()
})
})
这将禁用对所有元素的拖动。
我发现,对于IE,你必须添加draggable="false"属性的图像和锚,以防止拖动。CSS选项适用于所有其他浏览器。我用jQuery做了这个:
$("a").attr('draggable', false);
$("img").attr('draggable', false);