CSS /JS防止拖鬼图像?

是否有一种方法可以防止用户看到他们试图拖动的图像的幽灵(不是关心图像的安全性，而是体验)。

我已经尝试了这个，它修复了文本和图像上的蓝色选择的问题，但不是幽灵图像:

img {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}

(我也尝试用同样的规则嵌套div内的图像)。谢谢

当前回答

在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属性都必须重新定义!从我的角度看是这样的。更好的是，我在IE下的普通img标签有一个问题，IE无法调整图像的大小。现在，图像有了正确的尺寸。简单:

$(id).css( 'background-image', url('blah.png') );
$(id).css( 'background-size', '40px');

此外，或许可以考虑以下因素:

background-Repeat:no-repeat;
background-Position: center center;

其他回答

将图像作为空div的背景，或在透明元素下。当用户单击要拖动的图像时，他们是在单击一个div。

参见http://www.flickr.com/photos/thefella/5878724253/?f=hp

<div id="photo-drag-proxy"></div>

你可以使用CSS属性禁用webkit浏览器中的图像。

img{-webkit-user-drag: none;}

试一试:

img {
  pointer-events: none;
}

尽量避免

* {
  pointer-events: none;
}

处理dragstart事件并返回false。

在Firefox上测试:删除和放回图像工作!而且在执行过程中也是透明的。例如,

$('.imageContainerClass').mousedown(function() {
    var id = $(this).attr('id');
    $('#'+id).remove();
    $('#'+id).append('Image tag code');
});

编辑:奇怪的是，这只适用于IE和Firefox。我还在每张图片上添加了draggable = false。Chrome和Safari浏览器仍然是个幽灵。

$(id).css( 'background-image', url('blah.png') );
$(id).css( 'background-size', '40px');

此外，或许可以考虑以下因素:

background-Repeat:no-repeat;
background-Position: center center;

推荐文章