Question

有没有办法阻止用户看到他们试图拖动的图像的重影（不关心图像的安全性，而是体验）。

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

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

（我也尝试将图像嵌入div中，并将相同的规则应用于div）。感谢

Answer 1

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

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

Answer 2

我认为你可以改变你的

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

Answer 3

试一试：

img{pointer-events: none;}

并尽量避免

*{pointer-events: none;}

Answer 4

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

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

Answer 5

处理dragstart事件和return false。

Answer 6

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

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

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

Answer 7

<img src="myimage.jpg" ondragstart="return false;" />

Answer 8

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

Answer 9

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

享受。

Answer 10

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

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

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

Answer 11

所有浏览器都有前缀，无所不能，无需选择或拖动：

-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)

Answer 12

在React中，您所需要做的就是：

  <img
    src={}
    onMouseDown={(e) => {
      e.preventDefault();
      // other code
    }}
  />

Answer 13

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

Answer 14

非常简单不要因为很多逻辑而变得复杂使用简单的属性可拖动并将其设置为 false

<img draggable="false" src="img/magician.jpg" alt="" />

Answer 15

您可以使用“空图像元素”。
空的图元素-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);
})

Answer 16

您可以设置拖动项目时显示的图像。使用Chrome进行测试。

setDragImage

使用

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

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

Answer 17

我发现对于IE，你必须添加draggable =＆＃34; false＆＃34;属性到图像和锚点以防止拖动。 CSS选项适用于所有其他浏览器。我在jQuery中做到了这一点：

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

Answer 18

在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;

Answer 19

这项对我来说有用，我使用了一些灯箱脚本

.nodragglement {
    transform: translate(0px, 0px)!important;
}

CSS / JS防止拖动鬼影？

19 个答案: