भूत छवि को रोकने के लिए CSS / JS?

Question

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

मैंने यह कोशिश की है जो पाठ और छवियों पर नीले रंग के चयन के साथ समस्या को ठीक करता है लेकिन भूत की छवि को नहीं:

img {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}

(मैंने div के अंदर की छवि को भी उन्हीं नियमों के साथ लागू करने का प्रयास किया जो div पर लागू होते हैं)। धन्यवाद

Comments

इस उत्तर को देखें: stackoverflow.com/a/4211930/1060487 डुप्लिकेट संभव है प्रश्न

— mattdlockyer

Answer 1

आप draggableविशेषता को falseमार्कअप या जावास्क्रिप्ट कोड में सेट कर सकते हैं ।

// As a jQuery method: $('#myImage').attr('draggable', false);
document.getElementById('myImage').setAttribute('draggable', false);

<img id="myImage" src="http://placehold.it/150x150">

Comments

इसे जावास्क्रिप्ट के साथ क्यों जोड़ें ??? <img id="myImage" src="http://placehold.it/150x150" draggable="false">

— ग्रेग

@Greg: तुम मुझसे क्यों पूछ रहे हो? यह ओपी है जो एक जावास्क्रिप्ट समाधान चाहता था। साथ ही मैंने कहा "वैसे भी मार्कअप या जावास्क्रिप्ट कोड" में, इसलिए ऐसा नहीं है कि आप मार्कअप में ऐसा नहीं कर सकते यदि आपके पास अपने मार्कअप को संपादित करने का विकल्प था।

— BoltClock

के साथ संयोजन में FF में काम नहीं करता है -moz-user-select: none। संभव समाधान: जोड़ें pointer-events: none।

— सेड्रिक रीचेनबैक

हो सकता है कि मैंने इस सवाल का गलत अर्थ निकाला हो, लेकिन क्या ओपी यह नहीं पूछ रहा है कि वे कैसे ड्रैग एंड ड्रॉप को बरकरार रख सकते हैं, लेकिन सिर्फ भूत वाली छवि को छिपा सकते हैं? ड्रैग एंड ड्रॉप को पूरी तरह से अक्षम draggableकरने के लिए सेटिंग false।

— जेम्स

@ नाम: यह ईमानदार होने के लिए सवाल से बहुत स्पष्ट नहीं है। मैं ज्यादातर इस धारणा के तहत उत्तर दे रहा हूं कि घोस्ट इमेज ड्रैग-एंड-ड्रॉप (जो है) के लिए विजुअल इंडिकेटर है, और ज्यादातर लोग जो घोस्ट इमेज को छिपाना चाहते हैं, वे आमतौर पर ड्रैग-एंड-ड्रॉप की परवाह नहीं करते हैं। पूरी तरह से विकलांग।

— BoltClock

Answer 2

मुझे लगता है कि आप अपने को बदल सकते हैं

img {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}

में

img {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
}

Comments

@victorsosa सच है, लेकिन एक वास्तविक मानक अभी भी एक मानक है, W3C या नहीं। यही है, अगर हर ब्राउज़र इसका समर्थन करता है, तो यह जाना अच्छा है। याद रखें कि बहुत सारे W3C सामान AJAX की तरह मालिकाना के रूप में शुरू हुए।

— बीजोर

यह समाधान IE11 और फ़ायरफ़ॉक्स 57.0 में काम नहीं करता है।

— ट्यूडर सियोटलोस

Answer 3

कोशिश करो:

img {
  pointer-events: none;
}

और बचने की कोशिश करो

* {
  pointer-events: none;
}

Comments

यह एक खराब समाधान है, क्योंकि यह तत्व के साथ बातचीत करने की सभी क्षमता को हटा देता है। ओपी केवल एक तत्व की "ड्रैग" कार्यक्षमता को अक्षम करने के लिए कह रहा है, तत्व के साथ किसी भी और सभी सूचक-आधारित बातचीत को पूरी तरह से अक्षम करने के लिए नहीं।

— चाड

@ यह सच है, लेकिन यह संभव है कि छवि को लपेटें और ईवेंट श्रोता को रैपर में जोड़ें, जबकि छवि में अब कोई भूत छवि नहीं है।

— विन्सेन्ट होच-द्रेई

Answer 4

आप वेबकिट ब्राउज़रों में छवियों को अक्षम करने के लिए CSS संपत्ति का उपयोग कर सकते हैं।

img{-webkit-user-drag: none;}

Comments

यह भी साथ काम करता है -ms-user-drag, -moz-user-dragऔर user-drag। एक महान सीएसएस-केवल समाधान!

— 2

Answer 5

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

<img draggable="false" onmousedown="return false" style="user-drag: none" />

यदि आप आश्वस्त हैं कि उपयोगकर्ता के पास JS होगा, तो आपको केवल JS विशेषता आदि का उपयोग करने की आवश्यकता है। अधिक लचीलेपन के लिए, ondragstart, onselectstart और कुछ WebKit टैप / टच CSS देखें।

Comments

आप ऐसा करना चाहते हैं (this.onclick || this.click) () इसके बजाय .. यदि इस तर्क के अनुसार onclick को अपरिभाषित किया जा सकता है?

— वैन गुयेन

@ Kaizoku धन्यवाद, मैंने ऐसा नहीं माना था! आपके सुझाव के आधार पर मेरा उत्तर अपडेट किया गया।

— Beejor

यह फ़ायर्फ़ॉक्स में काम करने के लिए प्रतीत नहीं होता है, कड़ाई से बोलने के कारण, <img> के पास ईवेंट पर क्लिक या क्लिक करने की भी ज़रूरत नहीं है। वैसे भी, मैं सिर्फ onmouseup भाग का उपयोग करता हूं और मूल DIV को onclick को संभालने देता हूं और यह काम करता है।

— नेल्सन

@ नेल्सन मुझे बताने के लिए धन्यवाद। ऐसा लगता है कि onmouseup किसी भी onmousedown / अप हैंडलर से वापसी मूल्य की परवाह किए बिना onclick आग के बाद से वैसे भी जरूरत नहीं थी। मैंने सादगी के लिए अपने जवाब को संशोधित करने का फैसला किया। नया एक-लाइनर ठीक काम करना चाहिए; बस एफएफ, सफारी, क्रोम, IE8 / 10 में परीक्षण किया गया।

— बीजोर

मैं फ़ायरफ़ॉक्स 62 पर हूं और onmousedown="return false"पर्याप्त हूं । इसे खींचने के दौरान छवि का चयन करने वाले उपयोगकर्ता से बचने के लिए भी आवश्यक है, जो तब उन्हें चयन को खींचने की अनुमति देगा।

— लक्सैक्स

Answer 6

संभाल dragstartघटना और return false।

Answer 7

यदि आप वास्तव में ड्रैग इवेंट का उपयोग करने की आवश्यकता है, तो आप एक वैकल्पिक भूत छवि असाइन कर सकते हैं और ड्रैगेबल = गलत सेट नहीं कर सकते। तो बस एक खाली png असाइन करें जैसे:

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

Comments

सभी ब्राउज़र समर्थन नहीं करते हैं setDragImage, भले ही वे IE10 / 11 जैसे ड्रैग एंड ड्रॉप का समर्थन करते हों।

— जेम्स

क्या वास्तव में एक खाली png का उपयोग किए बिना इस चाल का उपयोग करना संभव है?

— फेबियन क्वात्रावाक्स

आप एक इनलाइन-परिभाषित बेस 64 एनकोडेड छवि का उपयोग कर सकते हैं ... उदाहरण के लिएdragIcon.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';

— मुर्रे स्मिथ

Answer 8

छवि को एक खाली div की पृष्ठभूमि के रूप में, या एक पारदर्शी तत्व के नीचे रखें। जब उपयोगकर्ता छवि को खींचने के लिए क्लिक करता है, तो वे एक div पर क्लिक कर रहे हैं।

Http://www.flickr.com/photos/thefella/5878724253/?f=hp देखें

<div id="photo-drag-proxy"></div>

Answer 9

फ़ायरफ़ॉक्स के लिए आपको इसके साथ थोड़ा गहरा जाना होगा:

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

का आनंद लें।

Answer 10

मैंने पाया कि IE के लिए, आपको ड्रैगिंग को रोकने के लिए छवियों और एंकरों के लिए draggable = "false" विशेषता जोड़ना होगा। CSS विकल्प अन्य सभी ब्राउज़रों के लिए काम करते हैं। मैंने यह jQuery में किया:

$("a").attr('draggable', false); 
$("img").attr('draggable', false);

Answer 11

खाली ईवेंट श्रोताओं को जोड़ने की तुलना में यहां बहुत आसान समाधान है। बस pointer-events: noneअपनी छवि के लिए तैयार है। यदि आपको अभी भी क्लिक करने योग्य होने की आवश्यकता है, तो इसके चारों ओर एक कंटेनर जोड़ें जो घटना को ट्रिगर करता है।

Answer 12

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

Answer 13

फ़ायरफ़ॉक्स पर परीक्षण किया गया: छवि कार्यों को हटाने और वापस लाना! और यह निष्पादन में भी पारदर्शी है। उदाहरण के लिए,

$('.imageContainerClass').mousedown(function() {
    var id = $(this).attr('id');
    $('#'+id).remove();
    $('#'+id).append('Image tag code');
});

संपादित करें : यह केवल IE और फ़ायरफ़ॉक्स पर, अजीब तरह से काम करता है। मैंने draggable = falseप्रत्येक छवि पर भी जोड़ा । अभी भी क्रोम और सफारी के साथ एक भूत।

संपादित 2 : पृष्ठभूमि छवि समाधान वास्तव में सबसे अच्छा एक है। एकमात्र सूक्ष्मता यह है कि background-sizeहर बार पृष्ठभूमि-छवि बदलने पर संपत्ति को फिर से परिभाषित करना पड़ता है! या तो, यह वही है जो मेरी तरफ से दिखता था। बेहतर अभी भी, मैं imgIE के तहत सामान्य टैग के साथ एक मुद्दा था , जहां IE छवियों का आकार बदलने में विफल रहा। अब, छवियों के सही आयाम हैं। सरल:

$(id).css( 'background-image', url('blah.png') );
$(id).css( 'background-size', '40px');

इसके अलावा, शायद उन पर विचार करें:

background-Repeat:no-repeat;
background-Position: center center;

Answer 14

आप उस छवि को सेट कर सकते हैं जो किसी आइटम को खींचे जाने पर दिखाई जाती है। क्रोम के साथ परीक्षण किया गया।

setDragImage

उपयोग

onclick = myFunction();
myFunction(e) {
    e.dataTransfer.setDragImage(someImage, xOffset, yOffset);
}

वैकल्पिक रूप से, जैसा कि पहले ही उत्तर में बताया गया है, आप draggable="false"HTML तत्व पर सेट कर सकते हैं , यदि तत्व को खींचने में सक्षम नहीं होना कोई समस्या नहीं है।

Answer 15

सभी ब्राउज़र उपसर्गों के साथ कोई चयन या खींचने के लिए सभी-के-अंत-सभी:

-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"जावास्क्रिप्ट के साथ: elm.draggable = falseया jQuery के साथ:elm.attr('draggable', false) ।

आप onmousedownफ़ंक्शन को भी संभाल सकते हैं return false। आप इनलाइन HTML के साथ कर सकते हैं: onmousedown="return false"जावास्क्रिप्ट के साथ: elm.onmousedown=()=>return false;या jQuery के साथ:elm.mousedown(()=>return false)

Answer 16

मेरे लिए यह काम, मैं कुछ lightbox स्क्रिप्ट का उपयोग करें

.nodragglement {
    transform: translate(0px, 0px)!important;
}