有没有一种方法可以防止用户看到他们尝试拖动的图像重影(与图像的安全性无关,而与体验有关)。
我已经尝试过此方法,可以解决文本和图像上的蓝色选择问题,但不能解决鬼图像的问题:
img {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
(我还尝试将图像嵌套在div中,并应用与div相同的规则)。谢谢
您可以在标记或JavaScript代码中将draggable
属性设置为false
。
// As a jQuery method: $('#myImage').attr('draggable', false);
document.getElementById('myImage').setAttribute('draggable', false);
<img id="myImage" src="http://placehold.it/150x150">
I think you can change your
img {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
into a
img {
-webkit-user-drag: none;
-khtml-user-drag: none;
-moz-user-drag: none;
-o-user-drag: none;
user-drag: none;
}
试试吧:
img {
pointer-events: none;
}
并尽量避免
* {
pointer-events: none;
}
您可以使用CSS属性在Webkit浏览器中禁用图像。
img{-webkit-user-drag: none;}
这将禁止在所有浏览器中拖动图像,同时保留其他事件,例如单击和悬停。只要有HTML5,JS或CSS可用就可以工作。
<img draggable="false" onmousedown="return false" style="user-drag: none" />
如果您确信用户将拥有JS,则只需使用JS属性等。为获得更大的灵活性,请查看ondragstart,onselectstart和某些WebKit点击/触摸CSS。
处理dragstart
事件并处理return false
。
如果您确实需要使用拖动事件并且不能设置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);
}
});
<img src="myimage.jpg" ondragstart="return false;" />
将图像放置为空div的背景或透明元素下方。当用户单击要拖动的图像时,他们正在单击div。
参见http://www.flickr.com/photos/thefella/5878724253/?f=hp
<div id="photo-drag-proxy"></div>
对于Firefox,您需要更深入地了解以下内容:
var imgs = document.getElementsByTagName('img');
// loop through fetched images
for (i = 0; i < imgs.length; i++) {
// and define onmousedown event handler
imgs[i].onmousedown = disableDragging;
}
function disableDragging(e) {
e.preventDefault();
}
请享用。
我发现对于IE,必须将draggable =“ false”属性添加到图像和锚点以防止拖动。CSS选项可用于所有其他浏览器。我在jQuery中做到了:
$("a").attr('draggable', false);
$("img").attr('draggable', false);
与添加空事件侦听器相比,这里有一个简单得多的解决方案。只需设置pointer-events: none
为您的图像即可。如果仍然需要它可单击,请在它周围添加一个容器来触发事件。
使用所有浏览器前缀的全部结束,无需选择或拖动:
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-user-drag: none;
-khtml-user-drag: none;
-moz-user-drag: none;
-o-user-drag: none;
-ms-user-drag: none;
user-drag: none;
您也可以将draggable
属性设置为false
。您可以使用内联HTML:draggable="false"
,Javascript:elm.draggable = false
或jQuery:elm.attr('draggable', false)
。
您也可以处理的onmousedown
功能return false
。您可以使用内联HTML:onmousedown="return false"
,Javascript:elm.onmousedown=()=>return false;
或jQuery:elm.mousedown(()=>return false)
在React中,您需要做的是:
<img
src={}
onMouseDown={(e) => {
e.preventDefault();
// other code
}}
/>
在Firefox上测试:删除并放回图片有效!而且它在执行时也是透明的。例如,
$('.imageContainerClass').mousedown(function() {
var id = $(this).attr('id');
$('#'+id).remove();
$('#'+id).append('Image tag code');
});
编辑:奇怪的是,这仅适用于IE和Firefox。我还添加draggable = false
了每个图像。Chrome和Safari仍然是鬼。
编辑2:背景图像解决方案确实是最好的。唯一的妙处是,background-size
每次更改背景图像时都必须重新定义该属性!大概就是我这边的样子。更好的是,我img
在IE下无法正常调整图片大小的情况下在IE下使用了普通标签。现在,图像具有正确的尺寸。简单:
$(id).css( 'background-image', url('blah.png') );
$(id).css( 'background-size', '40px');
另外,也许考虑一下:
background-Repeat:no-repeat;
background-Position: center center;
您可以设置拖动项目时显示的图像。经过Chrome测试。
用
onclick = myFunction();
myFunction(e) {
e.dataTransfer.setDragImage(someImage, xOffset, yOffset);
}
或者,如答案中已经提到的draggable="false"
,如果根本不能拖动该元素,则可以在HTML元素上进行设置。
您可以使用“空图像元素”。
空图元素-document.createElement(“ img”)
[HTML Code]
<div id="hello" draggable="true">Drag!!!</div>
[JavaScript Code]
var block = document.querySelector('#hello');
block.addEventListener('dragstart', function(e){
var img = document.createElement("img");
e.dataTransfer.setDragImage(img, 0, 0);
})
这项工作对我来说,我使用了一些灯箱脚本
.nodragglement {
transform: translate(0px, 0px)!important;
}
文章标签:css , html , javascript
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!
评论已关闭!