是否有一种方法可以防止用户看到他们试图拖动的图像的幽灵(不是关心图像的安全性,而是体验)。
我已经尝试了这个,它修复了文本和图像上的蓝色选择的问题,但不是幽灵图像:
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内的图像)。 谢谢
当前回答
这将在所有浏览器中禁用拖拽图像,同时保留其他事件,如单击和悬停。只要HTML5、JS或CSS可用,就可以使用。
<img draggable="false" onmousedown="return false" style="user-drag: none" />
如果你确信用户将拥有JS,你只需要使用JS属性,等等。要获得更大的灵活性,请查看ondragstart, onselectstart和一些WebKit点击/触摸CSS。
其他回答
你可以使用CSS属性禁用webkit浏览器中的图像。
img{-webkit-user-drag: none;}
这里有一个比添加空事件侦听器更简单的解决方案。 只需设置指针事件:none到你的图像。如果你仍然需要它是可点击的,在它周围添加一个容器来触发事件。
如果你真的需要使用拖动事件,并且不能设置draggable=false,你可以分配一个备用鬼图像。所以只需要像这样分配一个空白的png:
$('#img').bind({
dragstart: function(e) {
var dragIcon = document.createElement('img');
dragIcon.src = 'blank.png';
dragIcon.width = 100;
e.dataTransfer.setDragImage(dragIcon, -10, -10);
}
});
这个工作为我,我使用一些灯箱脚本
.nodragglement { 转换: 翻译(0px, 0px)!重要; }
这将在所有浏览器中禁用拖拽图像,同时保留其他事件,如单击和悬停。只要HTML5、JS或CSS可用,就可以使用。
<img draggable="false" onmousedown="return false" style="user-drag: none" />
如果你确信用户将拥有JS,你只需要使用JS属性,等等。要获得更大的灵活性,请查看ondragstart, onselectstart和一些WebKit点击/触摸CSS。