CSS / JS，以防止鬼影的拖动？

有没有一种方法可以防止用户看到他们尝试拖动的图像重影（与图像的安全性无关，而与体验有关）。

我已经尝试过此方法，可以解决文本和图像上的蓝色选择问题，但不能解决鬼图像的问题：

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测试。

setDragImage

用

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

本文地址：http://javascript.askforanswer.com/css-jsyifangzhiguiyingdetuodong.html
文章标签：css , html , javascript
版权声明：本文为原创文章，版权归 javascript 所有，欢迎分享本文，转载请保留出处！

文件下载