blocks|key|563837|text|可以在标记或JavaScript代码中将draggable属性设置为false。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|563838|​|563839|//+As+a+jQuery+method:+$('#myImage').attr('draggable',+false);
document.getElementById('myImage').setAttribute('draggable',+false);|code-block|syntax|javascript|563840|<img+id="myImage"+src="http://placehold.it/150x150">|563841|563842|entityMap|0|LINK|mutability|MUTABLE|url|https://html.spec.whatwg.org/multipage/dnd.html#the-draggable-attribute^0|K|9|Y|5|K|9|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@$9|Y|A|Z|B|C]|$9|10|A|11|B|C]]|D|@$9|12|A|13|1|14]]|E|$]]|$1|F|3|G|5|6|7|15|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|16|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|17|8|@]|D|@]|E|$K|L]]|$1|O|3|G|5|6|7|18|8|@]|D|@]|E|$]]|$1|P|3|-4|5|6|7|19|8|@]|D|@]|E|$]]]|Q|$R|$5|S|T|U|E|$V|W]]]]

<p>You can set the <a href="https://html.spec.whatwg.org/multipage/dnd.html#the-draggable-attribute" rel="noreferrer"><code>draggable</code></a> attribute to <code>false</code> in either the markup or JavaScript code.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>// As a jQuery method: $('#myImage').attr('draggable', false);
document.getElementById('myImage').setAttribute('draggable', false);</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;img id="myImage" src="http://placehold.it/150x150"&gt;</code></pre>
</div>
</div>
</p>


blocks|key|564086|text|我想你可以改变你的|type|unstyled|depth|inlineStyleRanges|entityRanges|data|564087|img+{
++-webkit-user-select:+none;
++-khtml-user-select:+none;
++-moz-user-select:+none;
++-o-user-select:+none;
++user-select:+none;
}|code-block|syntax|javascript|564088|转换成一个|564089|img+{
++-webkit-user-drag:+none;
++-khtml-user-drag:+none;
++-moz-user-drag:+none;
++-o-user-drag:+none;
++user-drag:+none;
}|564090|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>I think you can change your</p>

<pre class="lang-css prettyprint-override"><code>img {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}
</code></pre>

<p>into a </p>

<pre class="lang-css prettyprint-override"><code>img {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
}
</code></pre>


blocks|key|780696|text|试试看：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|780697|img+{
++pointer-events:+none;
}|code-block|syntax|javascript|780698|并尽量避免|780699|*+{
++pointer-events:+none;
}|780700|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>Try it:</p>

<pre class="lang-css prettyprint-override"><code>img {
  pointer-events: none;
}
</code></pre>

<p>and try to avoid</p>

<pre class="lang-css prettyprint-override"><code>* {
  pointer-events: none;
}
</code></pre>


blocks|key|564024|text|您可以使用CSS属性在webkit浏览器中禁用图像。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|564025|img{-webkit-user-drag:+none;}|code-block|syntax|javascript|564026|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>You can use a CSS property to disable images in webkit browsers.</p>

<pre><code>img{-webkit-user-drag: none;}
</code></pre>


blocks|key|780212|text|处理dragstart事件和return+false。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|780213|entityMap^0|2|9|E|C|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|M|8|@]|D|@]|E|$]]]|G|$]]

<p>Handle the <code>dragstart</code> event and <code>return false</code>.</p>


blocks|key|564266|text|<img+src="myimage.jpg"+ondragstart="return+false;"+/>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|564267|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>&lt;img src="myimage.jpg" ondragstart="return false;" /&gt;
</code></pre>


blocks|key|563901|text|如果您确实需要使用拖动事件并且无法设置draggable=false，则可以指定一个备用重影图像。所以只需像这样分配一个空的png：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|563902|++++$('#img').bind({
++++++++dragstart:+function(e)+{
++++++++++++var+dragIcon+=+document.createElement('img');
++++++++++++dragIcon.src+=+'blank.png';
++++++++++++dragIcon.width+=+100;
++++++++++++e.dataTransfer.setDragImage(dragIcon,+-10,+-10);
++++++++}
++++});|code-block|syntax|javascript|563903|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>You can assign an alternate ghost image if you really need to use drag events and can't set draggable=false. So just assign a blank png like so: </p>

<pre><code>    $('#img').bind({
        dragstart: function(e) {
            var dragIcon = document.createElement('img');
            dragIcon.src = 'blank.png';
            dragIcon.width = 100;
            e.dataTransfer.setDragImage(dragIcon, -10, -10);
        }
    });
</code></pre>


blocks|key|780160|text|将图像作为空div的背景，或放在透明元素下。当用户单击要拖动的图像时，他们是在div上单击。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|780161|请参阅http://www.flickr.com/photos/thefella/5878724253/?f=hp|offset|length|780162|<div+id="photo-drag-proxy"></div>|code-block|syntax|javascript|780163|entityMap|0|LINK|mutability|MUTABLE|url|http://www.flickr.com/photos/thefella/5878724253/?f=hp^0|0|3|1I|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@$D|U|E|V|1|W]]|A|$]]|$1|F|3|G|5|H|7|X|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<p>Place the image as a background of an empty div, or under a transparent element. When the user clicks on the image to drag, they are clicking on a div.</p>

<p>See <a href="http://www.flickr.com/photos/thefella/5878724253/?f=hp" rel="nofollow">http://www.flickr.com/photos/thefella/5878724253/?f=hp</a></p>

<pre><code>&lt;div id="photo-drag-proxy"&gt;&lt;/div&gt;
</code></pre>


blocks|key|563984|text|对于Firefox，你需要做得更深入一些：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|563985|var+imgs+=+document.getElementsByTagName('img');

++++//+loop+through+fetched+images
++++for+(i+=+0;+i+<+imgs.length;+i%2B%2B)+{
++++++++//+and+define+onmousedown+event+handler
++++++++imgs[i].onmousedown+=+disableDragging;
++++}

function+disableDragging(e)+{
++++++++e.preventDefault();
++++}|code-block|syntax|javascript|563986|好好享受吧。|563987|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>For Firefox you need to go a little deeper with this:</p>

<pre><code>var imgs = document.getElementsByTagName('img');

    // loop through fetched images
    for (i = 0; i &lt; imgs.length; i++) {
        // and define onmousedown event handler
        imgs[i].onmousedown = disableDragging;
    }

function disableDragging(e) {
        e.preventDefault();
    }
</code></pre>

<p>Enjoy.</p>


blocks|key|564122|text|我发现对于IE，你必须给图片和锚点添加draggable="false“属性，以防止拖拽。CSS选项适用于所有其他浏览器。我在jQuery中做到了这一点：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|564123|$("a").attr('draggable',+false);+
$("img").attr('draggable',+false);|code-block|syntax|javascript|564124|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>I found that for IE, you must add the draggable="false" attribute to images and anchors to prevent dragging. the CSS options work for all other browsers.  I did this in jQuery:</p>

<pre><code>$("a").attr('draggable', false); 
$("img").attr('draggable', false);
</code></pre>


blocks|key|780661|text|这里有一个比添加空事件侦听器简单得多的解决方案。只需将pointer-events:+none设置为您的图像。如果你仍然需要它是可点击的，在它周围添加一个触发事件的容器。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|780662|entityMap^0|R|K|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

<p>There is a much easier solution here than adding empty event listeners. 
Just set <code>pointer-events: none</code>to your image. If you still need it to be clickable, add a container around it which triggers the event.</p>


blocks|key|780616|text|您可以设置拖动项目时显示的图像。使用Chrome进行了测试。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|780617|setDragImage|offset|length|780618|使用|780619|onclick+=+myFunction();
myFunction(e)+{
++++e.dataTransfer.setDragImage(someImage,+xOffset,+yOffset);
}|code-block|syntax|javascript|780620|或者，正如答案中已经提到的，如果根本不能拖动元素是没有问题的，您可以在HTML元素上设置draggable="false"。|style|CODE|780621|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/setDragImage^0|0|0|C|0|0|0|0|18|H|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@]|9|@$D|10|E|11|1|12]]|A|$]]|$1|F|3|G|5|6|7|13|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|14|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|15|8|@$D|16|E|17|O|P]]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|18|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]]]

<p>You can set the image that is shown when an item is dragged. Tested with Chrome.</p>

<p><a href="https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/setDragImage" rel="nofollow noreferrer">setDragImage</a></p>

<p>use  </p>

<pre><code>onclick = myFunction();
myFunction(e) {
    e.dataTransfer.setDragImage(someImage, xOffset, yOffset);
}
</code></pre>

<p>Alternatively, as already mentioned in the answers, you can set <code>draggable="false"</code> on the HTML element, if not being able to drag the element at all is no issue. </p>


blocks|key|780809|text|您可以使用"Empty+Img+Element“。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|780810|空Img元素-+document.createElement("img")|780811|[HTML+Code]
<div+id="hello"+draggable="true">Drag!!!</div>|code-block|syntax|javascript|780812|[JavaScript+Code]
var+block+=+document.querySelector('#hello');
block.addEventListener('dragstart',+function(e){
++++var+img+=+document.createElement("img");
++++e.dataTransfer.setDragImage(img,+0,+0);
})|780813|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|O|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>You can use &quot;Empty Img Element&quot;.<br />
Empty Img Element - document.createElement(&quot;img&quot;)</p>
<pre><code>[HTML Code]
&lt;div id=&quot;hello&quot; draggable=&quot;true&quot;&gt;Drag!!!&lt;/div&gt;
</code></pre>
<pre><code>[JavaScript Code]
var block = document.querySelector('#hello');
block.addEventListener('dragstart', function(e){
    var img = document.createElement(&quot;img&quot;);
    e.dataTransfer.setDragImage(img, 0, 0);
})
</code></pre>


blocks|key|564321|text|这对我来说很有用，我使用了一些lightbox脚本|type|unstyled|depth|inlineStyleRanges|entityRanges|data|564322|​|564323|.nodragglement+{
++++transform:+translate(0px,+0px)!important;
}|code-block|syntax|javascript|564324|564325|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p>This work for me, i use some lightbox scripts</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.nodragglement {
    transform: translate(0px, 0px)!important;
}</code></pre>
</div>
</div>
</p>


<p>Is there a way to prevent the user from seeing a ghost of the image they are trying to drag (not concern about security of the images, but the experience).</p>

<p>I've tried this which fixes the problem with the blue selection on text and images but not the ghost image:</p>

<pre class="lang-css prettyprint-override"><code>img {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}
</code></pre>

<p>(I also tried nesting the image inside a div with the same rules applied to the div).
Thanks</p>


CSS /JS to prevent dragging of ghost image?

容器

jQuery

有没有办法防止用户看到他们试图拖动的图像的幽灵(不是考虑图像的安全性，而是用户的体验)。我试过这个方法，它解决了文本和图像上蓝色选择的问题，但不解决了鬼影图像的问题：img {  -webkit-user-select: none;  -khtml-user-select: none;  -moz-user-select: none;  -o-user-select: none;  user-se

问CSS /JS防止拖拽重影图像？
EN

回答 14

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS /JS防止拖拽重影图像？EN

回答 14

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS /JS防止拖拽重影图像？
EN