CSS / JS,以防止鬼影的拖动?

2020/10/31 12:23 · javascript ·  · 0评论

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

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

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
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!