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

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

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。