it-swarm.cn

CSS/JS防止拖动鬼影?

有没有办法阻止用户看到他们试图拖动的图像的鬼魂(不关心图像的安全性,而是体验)。

我试过这个解决了文本和图像上的蓝色选择而不是重影图像的问题:

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

(我也尝试将图像嵌套在div中,并将相同的规则应用于div)。谢谢

103
user885355

您可以在标记或JavaScript代码中将 draggable 属性设置为false。请参阅 此演示

<img id="myImage" draggable="false" src="http://placehold.it/150x150">
142
BoltClock

我想你可以改变你的想法

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;
}
53
Max

试试吧:

img{pointer-events: none;}

并尽量避免

*{pointer-events: none;}
15
Erik Rybalkin

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

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

处理dragstart事件和return false

9
SLaks

这将禁用拖动 所有浏览器中的图像 ,同时保留其他事件,如点击和悬停。只要HTML5,JS或CSS中的任何一个可用,就可以正常工作。

<img draggable="false" onmousedown="return false" style="user-drag: none" />

如果你确信用户将拥有JS,你只需要使用JS属性等。为了更加灵活,请查看ondragstart,onselectstart和一些WebKit点击/触摸CSS。

5
Beejor

如果确实需要使用拖动事件并且无法设置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);
        }
    });
3
louisinhongkong

将图像作为空div的背景放置,或放在透明元素下。当用户点击要拖动的图像时,他们会点击一个div。

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

<div id="photo-drag-proxy"></div>
2
Michael Jasper

对于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();
    }

请享用。

2
dijipiji

这里有一个比添加空事件监听器更简单的解决方案。只需将pointer-events: none设置为您的图像即可。如果您仍然需要它可以点击,请在其周围添加一个容器来触发事件。

1
Micros

我发现对于IE,你必须将draggable =“false”属性添加到图像和锚点以防止拖动。 CSS选项适用于所有其他浏览器。我在jQuery中这样做了:

$("a").attr('draggable', false); 
$("img").attr('draggable', false);
0
Derek Wade

在Firefox上测试:移除和放回图像有效!它在执行时也是透明的。例如,

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

_ edit _ :这只适用于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;
0
Tama Yoshi

您可以设置拖动项目时显示的图像。经过Chrome测试。

setDragImage

使用

onclick = myFunction();
myFunction(e) {
    e.dataTransfer.setDragImage(someImage, xOffset, yOffset);
}

或者,正如答案中已经提到的,您可以在HTML元素上设置draggable="false",如果根本无法拖动元素则没有问题。

0
Thibauld Nuyten