HTML पेज से एक छवि को खींचना अक्षम करें

Question

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

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

Comments

@AgentConundrum - यदि उपयोगकर्ता बचाता है और जो चाहे वह करता है तो मेरे लिए कोई समस्या नहीं है। मेरी एकमात्र आवश्यकता उस छवि को नहीं खींचना है।

— उपयोगकर्ता 1034

Answer 1

आप इसे पसंद कर सकते हैं ...

document.getElementById('my-image').ondragstart = function() { return false; };

इसे काम करते हुए देखें (या काम नहीं, बल्कि)

ऐसा लगता है कि आप jQuery का उपयोग कर रहे हैं।

$('img').on('dragstart', function(event) { event.preventDefault(); });

Comments

@alex - इमेज ड्रैगिंग नहीं करने का उद्देश्य छवि की चोरी नहीं है। उद्देश्य पूरी तरह से अलग है। मैं उस छवि को छांटने और छोड़ने योग्य बना रहा हूं। इसलिए इसे समझाने में लंबा समय लगता है।

— उपयोगकर्ता 1034

@alex - क्या ondragstart ब्राउज़र स्वतंत्र है?

— उपयोगकर्ता 1034

@AdamMerrifield के $(document)बजाय$(window)

— rybo111

मैंने अभी-अभी काम किया है आप jQuery को सरल बना सकते हैं:$('img').on('dragstart', false);

— rybo111

@alex अंडर हैंडलर:The value false is also allowed as a shorthand for a function that simply does return false.

— एडम

Answer 2

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

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

Comments

लेकिन इससे एफएफ कम से कम अजीब चयन प्रभाव होता है। बेहतर अभी भी झूठे वापस;

— भूमि सिंहल

जब लिंक के रूप में छवि का उपयोग नहीं किया जाता है।

— नीलेश

ऐसा लगता है कि IE में काम नहीं करेगा (किसी भी संस्करण) देखें: caniuse.com/pointer-events

— जस्टिन टान्नर

इसके अलावा एक सीएसएस केवल समाधान: एक तत्व जगह से अधिकimg ।

— एलेक्स

-1! इसका उपयोग सभी पॉंटर घटनाओं को रोकने के लिए किया जाना चाहिए (जब आप एक छवि अपलोड करना चाहते हैं, जैसे कि ऊपर खींचना सहित)। जावास्क्रिप्ट समाधान isntead का उपयोग करें!

— विटाली

Answer 3

बस अपनी छवि टैग में draggable = "false" जोड़ें:

<img draggable="false" src="image.png">

IE8 और तहत हालांकि समर्थन नहीं करता है।

Comments

मैं Magento का उपयोग कर रहा / रही हूँ, जैसे मेरी div: <div class = "product-img-box"> <? Php इको $ यह-> getChildHtml ('मीडिया')?> </ Div> मैं राइट क्लिक को कैसे रोक सकता हूं और कोई ड्रैग करने योग्य नहीं? मेरी छवि div @ मादो

— मणि

Answer 4

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

Comments

+1 डाउनवोट्स को न समझें। यह अंतिम समाधान नहीं है, जबकि यह सभी को खींचने से रोकता है, न केवल एक विशेष छवि। लेकिन यह सही दिशा दिखाता है (और मुझे लगता है कि यह पहला उत्तर था जो यह करता है)

— Dr.Molle

@DrMolle यह मेरे जवाब पर स्टीव द्वारा छोड़ी गई (डिलीट की गई) टिप्पणियों के जवाब में हो सकता है ।

— एलेक्स

याद रखें कि कभी-कभी लोग अपने बुकमार्क बार के लिंक को खींच लेंगे - यह समाधान इस क्षमता को हटा देगा।

— jClark

Answer 5

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

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

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

Answer 6

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

Comments

यह फ़ायरफ़ॉक्स में खींचने योग्य है

— डीन क्रिस्चियन आर्मडा

Answer 7

मैंने खुद कोशिश की और पाया कि यह काम कर रहा है।

$("img").mousedown(function(){
    return false;
});

मुझे यकीन है कि यह सभी छवियों को खींचने में अक्षम है। यकीन नहीं होता कि यह कुछ और असर करता है।

Comments

आह! आपको उल्लेख करना चाहिए कि आप jQuery का उपयोग कर रहे थे / jQuery का उपयोग कर सकते थे। JQuery का उपयोग करने के लिए +1।

— एलेक्स

@alex - मुझे क्षमा करें। मैं इसे अपना स्वयं का प्रयास कर रहा था। और मुझे यकीन नहीं है कि यह कुछ और प्रभाव डालता है।

— उपयोगकर्ता 1034

तुम ठीक हो! नहीं, जहाँ तक मुझे पता है, आपके यहाँ जो कुछ भी हो रहा है, उसका किसी और चीज़ पर कोई नकारात्मक प्रभाव नहीं होना चाहिए।

— एलेक्स

यदि छवि किसी <a>टैग के अंदर लिपटी हो तो क्या होगा ? तब यदि उपयोगकर्ता छवि पर क्लिक करता है, तो लिंक क्लिक नहीं होगा।

— 13:30 बजे SeinopSys

धन्यवाद। Btw, यह भी एक 'event.preventDefault (); `के साथ GWT में काम करता है।

— जोहाना

Answer 8

इस उत्तर को देखें ; Chrome और Safari में आप डिफ़ॉल्ट ड्रैगिंग को अक्षम करने के लिए निम्न शैली का उपयोग कर सकते हैं:

-webkit-user-drag: auto | element | none;

आप फ़ायरफ़ॉक्स और IE (10+) के लिए उपयोगकर्ता-चयन का प्रयास कर सकते हैं :

-moz-user-select: none | text | all | element
-ms-user-select: none | text | all | element

Answer 9

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

onmousedown="return false;"

जैसे

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

Answer 10

यह कोड वही करता है जो आप चाहते हैं। यह ईवेंट पर निर्भर किसी भी अन्य कार्यों की अनुमति देते समय छवि को खींचने से रोकता है।

$("img").mousedown(function(e){
    e.preventDefault()
});

Answer 11

इसे सीधे उपयोग करें: 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>

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

Answer 12

चूँकि मेरी छवियाँ ajax का उपयोग करके बनाई गई थीं, और इसलिए windows.load पर उपलब्ध नहीं हैं।

$("#page").delegate('img', 'dragstart', function (event) { event.preventDefault(); });

इस तरह मैं नियंत्रित कर सकता हूं कि कौन सा अनुभाग व्यवहार को अवरुद्ध करता है, यह केवल एक ईवेंट बाइंडिंग का उपयोग करता है और यह कुछ भी किए बिना भविष्य के अजाक्स निर्मित छवियों के लिए काम करता है।

JQuery के नए onबंधन के साथ:

$('#page').on('dragstart', 'img', function(event) { event.preventDefault(); }); (साभार @ialphan)

Comments

.On का उपयोग करना इस तरह होगा: $ (दस्तावेज़) .on ('ड्रैगस्टार्ट', 'img', फंक्शन (e) {e.preventDefault ();});

— इलफ़न

यह सही उपाय है। असीमित imgतत्वों, वर्तमान या भविष्य के लिए बाध्यकारी एक घटना । कम से कम गहन, सबसे मजबूत।

— सहेली

Answer 13

<img draggable="false" src="images/testimg1.jpg" alt=""/>

Answer 14

महान समाधान, संघर्षों के साथ एक छोटा मुद्दा था, अगर किसी और के पास अन्य जेएस पुस्तकालय से संघर्ष है तो बस इस तरह कोई संघर्ष सक्षम नहीं है।

var $j = jQuery.noConflict();$j('img').bind('dragstart', function(event) { event.preventDefault(); });

आशा है कि यह किसी को बाहर करने में मदद करता है।

Answer 15

वैसे मुझे नहीं पता कि यहाँ के जवाबों ने सभी की मदद की है या नहीं, लेकिन यहाँ एक सरल इनलाइन सीएसएस ट्रिक है जो निश्चित रूप से आपको HTML पेज पर टेक्स्ट को ड्रैग और सेलेक्ट करने में मदद करेगा।

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

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

Answer 16

आप मेरे समाधान को सर्वश्रेष्ठ मान सकते हैं। अधिकांश उत्तर पुराने ब्राउज़र जैसे IE8 से संगत नहीं हैं क्योंकि e.preventDefault () अभ्यस्त होने के साथ-साथ ondragstart इवेंट का समर्थन नहीं करता है । संगत ब्राउज़र को पार करने के लिए आपको इस छवि के लिए मूसमव इवेंट को ब्लॉक करना होगा। नीचे उदाहरण देखें:

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 के लिए भी परीक्षण और काम किया

Answer 17

छवि के लिए निम्नलिखित सीएसएस गुण सेट करें:

user-drag: none; 
user-select: none;
-moz-user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none;
-ms-user-select: none;

Comments

फ़ायरफ़ॉक्स पर काम नहीं करता है (मैक फ़ायरफ़ॉक्स 69 का उपयोग करके)

— बेन व्हीलर

Answer 18

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

कुछ इस तरह:

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

Answer 19

document.getElementById('#yourImageId').addEventListener('dragstart', function(e) {
     e.preventDefault();
});

इस प्लंकर में काम करता है http://plnkr.co/edit/HbAbJkF0PVLIMjTmEZml

Answer 20

jQuery:

$('body').on('dragstart drop', function(e){
    e.preventDefault();
    return false;
});

आप शरीर के चयनकर्ता को किसी अन्य कंटेनर से बदल सकते हैं, जिसे आप बच्चों को खींचने और गिराए जाने से रोकना चाहते हैं।

Answer 21

इसके लिए आप इनलाइन कोड का उपयोग कर सकते हैं

<img draggable="false" src="http://www.ourkanpur.com/images/logo.png">

और दूसरा विकल्प बाहरी या ऑन-पेज सीएसएस का उपयोग होता है

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

<img src="http://www.ourkanpur.com/images/logo.png">

दोनों इस साइट पर बाहरी सीएसएस का उपयोग करते हुए सही ढंग से काम कर रहे हैं (यहां क्लिक करें)

Comments

इनमें से कोई भी फ़ायरफ़ॉक्स पर काम नहीं करता है (मैक फ़ायरफ़ॉक्स 69 का उपयोग करके)

— बेन व्हीलर

Answer 22

उत्तर सरल है:

<body oncontextmenu="return false"/>- राइट राइट क्लिक को <body ondragstart="return false"/>अक्षम करें - माउस ड्रैगिंग को अक्षम करें - <body ondrop="return false"/>माउस ड्रॉप को अक्षम करें

Answer 23

मैंने निम्नलिखित जावास्क्रिप्ट के साथ ondragstart की निगरानी के साथ-साथ सीएसएस गुण भी दिखाए।

handleDragStart: function (evt) {
    if (evt.target.nodeName.match(/^(IMG|DIV|SPAN|A)$/i)) {
      evt.preventDefault();
      return false;
    }
  },

Answer 24

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

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