[Javascript] 禁用從HTML頁面拖動圖像


Answers

僅限CSS解決方案:使用pointer-events: none

https://developer.mozilla.org/en-US/docs/CSS/pointer-events

Question

我需要在我的頁面上放置一張圖片。 我想禁用拖動該圖像。 我正在嘗試很多事情,但沒有任何幫助。 有人可以幫我嗎?

我不想將該圖像作為背景圖像,因為我正在調整圖像大小。




好吧,我不知道這裡的答案是否有助於每個人,但這裡有一個簡單的內聯CSS技巧,它肯定會幫助您禁用在HTML頁面上拖動和選擇文本。

在你的<body>標籤上添加ondragstart="return false" 。 這將禁用拖動圖像。 但是,如果您還想禁用文本選擇,請添加onselectstart="return false"

代碼如下所示: <body ondragstart="return false" onselectstart="return false">




直接使用這個: ondragstart="return false;" 在你的圖片標籤中。

<img src="http://image-example.png" ondragstart="return false;"/>

如果您有多個圖片,並且包裹在<div>標籤上:

<div ondragstart="return false;">
   <img src="image1.png"/>
   <img scr="image2.png"/>
</div>

適用於所有主流瀏覽器。




你可以考慮我的解決方案最好。 大多數答案與IE8等舊版瀏覽器不兼容,因為不支持e.preventDefault()以及ondragstart事件。 要做到這一點,跨瀏覽器兼容,你必須阻止此圖像的mousemove事件。 看下面的例子:

jQuery的

$("#my_image").mousemove( function(e) { return false } ); // fix for IE
$("#my_image").attr("draggable", false); // disable dragging from attribute

沒有jQuery

var my_image = document.getElementById("my_image");
my_image.setAttribute("draggable", false);

if (my_image.addEventListener) {
   my_image.addEventListener("mousemove", function(e) { return false });
} else if (my_image.attachEvent) {
   my_image.attachEvent("onmousemove", function(e) { return false });
}

測試和工作甚至IE8




您可以將以下內容添加到您不想拖動的每張圖片上(在img標籤內):

onmousedown="return false;"

例如

img src="Koala.jpg" onmousedown="return false;"



img {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-touch-callout: none;
}

我在我的網站上使用它http://www.namdevmatrimony.in/它的作品像一個魔術! :)




好吧,這是可能的,而其他發布的答案是完全有效的,但你可以採取暴力方法,並防止圖像上的默認行為。 其中,是開始拖動圖像。

像這樣的東西:

window.onload = function () {  
    var images = document.getElementsByTagName('img');   
    for (var i = 0; img = images[i++];) {    
        img.ondragstart = function() { return false; };
    }  
};  



window.ondragstart = function() { return false; } 



偷我自己的answer ,只是在圖像上添加一個完全透明的相同大小的元素。 調整圖像大小時,請務必調整元素的大小。

這應該適用於大多數瀏覽器,甚至更老的瀏覽器。




最簡單的跨瀏覽器解決方案

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

問題與

img {
 -moz-user-select: none;
 -webkit-user-select: none;
 -ms-user-select: none;
 user-select: none;
 -webkit-user-drag: none;
 user-drag: none;
 -webkit-touch-callout: none;
}

它是不是在Firefox中工作