[javascript] एक HTML पृष्ठ से एक छवि खींचने अक्षम करें


9 Answers

सीएसएस केवल समाधान: pointer-events: none उपयोग करें pointer-events: none

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

Question

मुझे अपने पेज में एक छवि डालना होगा। मैं उस छवि को खींचने को अक्षम करना चाहता हूं। मैं बहुत सी चीजों की कोशिश कर रहा हूं लेकिन कोई मदद नहीं। क्या कोई मेरी मदद कर सकता है ?

मैं उस छवि को पृष्ठभूमि-छवि के रूप में नहीं रखना चाहता क्योंकि मैं छवि का आकार बदल रहा हूं।




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/ पर प्रयोग किया है यह एक जादू की तरह काम करता है !!! :)




सबसे सरल क्रॉस ब्राउज़र समाधान है

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

यह है कि यह फ़ायरफ़ॉक्स में काम नहीं कर रहा है




खैर मुझे नहीं पता कि यहां के उत्तरों ने सभी की मदद की है या नहीं, लेकिन यहां एक साधारण इनलाइन सीएसएस चाल है जो निश्चित रूप से आपको HTML पृष्ठ पर टेक्स्ट को खींचने और चुनने में अक्षम करने में मदद करेगी।

अपने <body> टैग पर ondragstart="return false" जोड़ें। यह छवियों को खींचने को अक्षम कर देगा। लेकिन यदि आप टेक्स्ट चयन को अक्षम करना चाहते हैं तो onselectstart="return false" जोड़ें।

कोड इस तरह दिखेगा: <body ondragstart="return false" onselectstart="return false">




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



अपने स्वयं के answer से चोरी, छवि पर एक ही आकार के एक पूरी तरह से पारदर्शी तत्व जोड़ें। जब आप अपनी छवि का आकार बदलते हैं, तो तत्व का आकार बदलना सुनिश्चित करें।

यह अधिकांश ब्राउज़रों, यहां तक ​​कि पुराने लोगों के लिए भी काम करना चाहिए।




आप मेरे समाधान को सबसे अच्छा मान सकते हैं। अधिकांश उत्तर IE8 जैसे पुराने ब्राउज़र के साथ संगत नहीं हैं क्योंकि e.preventDefault () समर्थित नहीं होंगे साथ ही साथ ऑनड्रैगस्टार्ट ईवेंट भी। इसे ब्राउज़र को संगत करने के लिए आपको इस छवि के लिए 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 });
}

परीक्षण और आईई 8 के लिए भी काम किया




खैर, यह संभव है, और पोस्ट किए गए अन्य उत्तर पूरी तरह से मान्य हैं, लेकिन आप एक क्रूर बल दृष्टिकोण ले सकते हैं और छवियों पर mousedown के डिफ़ॉल्ट व्यवहार को रोक सकते हैं। जो, छवि खींचने शुरू करना है।

कुछ इस तरह:

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



आप प्रत्येक छवि को निम्नलिखित जोड़ सकते हैं जिसे आप ड्रैगगेबल नहीं करना चाहते हैं, ( img टैग के अंदर):

onmousedown="return false;"

जैसे

img src="Koala.jpg" onmousedown="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>

सभी प्रमुख ब्राउज़रों में काम करता है।




Related