जेएस का उपयोग किए बिना किसी छवि को ड्रैग करने योग्य या चयन करने से रोकना

Question

क्या किसी को छवि को खींचने योग्य और चयन योग्य नहीं बनाने का तरीका पता है - उसी समय - फ़ायरफ़ॉक्स में, जावास्क्रिप्ट का सहारा लिए बिना? तुच्छ लगता है, लेकिन यहाँ मुद्दा है:

1) फ़ायरफ़ॉक्स में खींचा और हाइलाइट किया जा सकता है:

<img src="...">

2) इसलिए हम इसे जोड़ते हैं, लेकिन छवि को खींचते समय भी हाइलाइट किया जा सकता है:

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

3) इसलिए हम इसे जोड़ते हैं, हाइलाइटिंग समस्या को ठीक करने के लिए, लेकिन फिर काउंटरइंटिवली, छवि फिर से ड्रैगेबल हो जाती है। अजीब, मुझे पता है! एफएफ 16.0.1 का उपयोग करना

<img src="..." draggable="false" style="-moz-user-select: none;">

तो, क्या किसी को पता है कि "-मोज़-यूज़र-सिलेक्ट: कोई नहीं" को क्यों जोड़ा जाता है, किसी तरह "ड्रैगेबल = गलत" को ट्रम्प और डिसेबल करेगा? बेशक, वेबकिट उम्मीद के मुताबिक काम करता है। इस बारे में इंटरवेब पर कुछ भी नहीं है ... यह बहुत अच्छा होगा अगर हम इस पर कुछ प्रकाश डाल सकते हैं।

धन्यवाद!!

संपादित करें: यह UI तत्वों को अनजाने में खींचे जाने और प्रयोज्य में सुधार करने के बारे में है - एक प्रतिलिपि सुरक्षा पर कुछ लंगड़ा प्रयास नहीं। :-)

Comments

मुझे आशा है कि आपको नहीं लगता कि इससे लोग आपकी छवि को डिस्क पर सहेजने से रोकेंगे। किसी को भी इस बात की थोड़ी सी भी समझ नहीं है कि ब्राउज़र कैसे काम करते हैं, इसे आसानी से प्राप्त कर पाएंगे।

— जिम गैरिसन

@JimGarrison निश्चित रूप से नहीं, माफ करना मुझे अधिक विशिष्ट होना चाहिए था, मैं अपने कुछ यूआई तत्वों को स्थानांतरित करने से रोकने की कोशिश कर रहा हूं, सही संदर्भ में यह प्रयोज्य को नुकसान पहुंचा रहा है।

— tmkly3

इसके बजाय बहुत उपयोगी है यदि आपके पास ऐसे पृष्ठभूमि तत्व हैं जिन्हें डेस्कटॉप पर खींचा जाएगा (या उस पर काम करते समय ब्राउज़र विंडो के पीछे पृष्ठभूमि में खुली हुई फ़ाइल में href कोड लाइनों के रूप में बदतर है!) जब वे बहुत छोटे आधुनिक स्क्रॉल सलाखों के करीब होते हैं और आप स्क्रॉल करते समय हर बार बार को हिट न करें।

— गरवानी

फ़ायरफ़ॉक्स में यह वास्तव में लंबे समय के लिए एक ज्ञात मुद्दा रहा है क्योंकि यह ( डुप्लिकेट? )

— निकला

Answer 1

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

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

Comments

धन्यवाद, मेरे पास इन-प्लेस भी है, लेकिन यह मुद्दा फ़ायरफ़ॉक्स में बग जैसा दिखने लगा है। मुझे लगता है कि इसे हल करने का एकमात्र तरीका जावास्क्रिप्ट के माध्यम से है।

— tmkly3

सभी ब्राउज़रों पर काम किया।

— मिलाद अबुबली

ठीक है तो मैं इसे कैसे बनाऊं लेकिन इसका कोई असर नहीं दिखा, लेकिन फिर भी ड्रैग इवेंट में आग कैसे लगी?

— Ty_

मैंने पाया कि मैं अभी भी फ़ायरफ़ॉक्स 47 पर खींच सकता हूं, लेकिन मासाडोव के ऑनड्रैगस्टार्ट को जोड़कर = "झूठे लौटें;" छवि टैग के लिए संपत्ति ने इसे ठीक कर दिया।

— andrew pate

मैं अभी भी क्रोम में खींच सकता हूं

— lonewarrior556

Answer 2

मैं अपना समाधान साझा करना भूल गया हूं, मुझे जेएस का उपयोग किए बिना ऐसा करने का कोई तरीका नहीं मिला। कुछ कोने के मामले हैं जहां @Jeffery A वुडन द्वारा सुझाए गए CSS सिर्फ अभ्यस्त कवर है।

यह वह है जो मैं अपने सभी यूआई कंटेनरों पर लागू करता हूं, प्रत्येक तत्व पर लागू करने की आवश्यकता नहीं है क्योंकि यह सभी बाल तत्वों पर पाठ करता है।

सीएसएस:

.unselectable {
    /* For Opera and <= IE9, we need to add unselectable="on" attribute onto each element */
    /* Check this site for more details: http://help.dottoro.com/lhwdpnva.php */
    -moz-user-select: none; /* These user-select properties are inheritable, used to prevent text selection */
    -webkit-user-select: none;
    -ms-user-select: none; /* From IE10 only */
    user-select: none; /* Not valid CSS yet, as of July 2012 */

    -webkit-user-drag: none; /* Prevents dragging of images/divs etc */
    user-drag: none;
}

जे एस:

var makeUnselectable = function( $target ) {
    $target
        .addClass( 'unselectable' ) // All these attributes are inheritable
        .attr( 'unselectable', 'on' ) // For IE9 - This property is not inherited, needs to be placed onto everything
        .attr( 'draggable', 'false' ) // For moz and webkit, although Firefox 16 ignores this when -moz-user-select: none; is set, it's like these properties are mutually exclusive, seems to be a bug.
        .on( 'dragstart', function() { return false; } );  // Needed since Firefox 16 seems to ingore the 'draggable' attribute we just applied above when '-moz-user-select: none' is applied to the CSS 

    $target // Apply non-inheritable properties to the child elements
        .find( '*' )
        .attr( 'draggable', 'false' )
        .attr( 'unselectable', 'on' ); 
};

यह जिस तरह से जरूरत से ज्यादा जटिल था।

Comments

$ (el) .on ('ड्रैगस्टार्ट', फंक्शन (e) {e.preventDefault (),});

— पीट बी

यह <img src="..." draggable="false" style="-moz-user-select: none;" ondragstart="return false;">ओपी के कोड से मेल खाने के लिए भी लिखा जा सकता है ।

— मसाडो

Answer 3

आप pointer-eventsअपने CSS में संपत्ति का उपयोग कर सकते हैं , और इसे 'कोई नहीं' के बराबर सेट कर सकते हैं

img {
    pointer-events: none;
}

संपादित

यह ईवेंट को ब्लॉक (क्लिक) करेगा। तो बेहतर समाधान होगा

<img draggable="false" (dragstart)="false;" class="unselectable">

.unselectable {
  user-drag: none; 
  user-select: none;
  -moz-user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

Comments

इस तरह से करना एक छवि आइकन को ग्लिफ़िकॉन की तरह अधिक व्यवहार करता है, इसलिए मुझे यह तरीका सबसे अच्छा लगता है।

— फंककोडायट

यह भी (onclick) अनुपयोगी जैसी घटनाओं को बनाता है .. यदि आप इस दृष्टिकोण का उपयोग करते हैं तो सावधान रहें।

— निकोलस बूवरेट

यह उत्तर अभी भी मान्य है जबकि स्वीकृत उत्तर नवीनतम सॉफ्टवेयर संस्करणों पर नहीं है। यह नया स्वीकृत उत्तर होना चाहिए। @ tmkly3

— progyammer

यदि हम छवि के लिए घटना पर क्लिक करते हैं तो यह समस्या पैदा करेगा। यह क्लिक घटना को रोक देगा

— प्रताप एके

Answer 4

स्थिति के आधार पर, छवि को divसीएसएस के साथ पृष्ठभूमि की छवि बनाने में अक्सर मदद मिलती है।

<div id='my-image'></div>

फिर सीएसएस में:

#my-image {
    background-image: url('/img/foo.png');
    width: ???px;
    height: ???px;
}

एक बटन और एक अलग आकार विकल्प के साथ एक लाइव उदाहरण के लिए इस JSFiddle देखें ।

Answer 5

आप शायद बस का सहारा ले सकते हैं

<img src="..." style="pointer-events: none;">

Comments

यह स्वीकृत उत्तर होना चाहिए, उपयोगकर्ता ड्रैग फ़ायरफ़ॉक्स द्वारा समर्थित नहीं है। इसके लिए शुक्रिया!

— मेरिट६६१६

मेरे लिए भी, "पॉइंटर-ईवेंट्स" एक समाधान था क्योंकि इसने क्रॉस-ब्राउज़र पर काम किया था ("यूजर-ड्रैग" का फ़ायरफ़ॉक्स पर कोई प्रभाव नहीं है, कम से कम 11.2018 में)

— डेविड दाल बुस्को

Answer 6

विशेष रूप से विंडोज एज ब्राउज़र के लिए एक सामान्य समाधान (-ms-user-select के रूप में: कोई नहीं; CSS नियम काम नहीं करता है):

window.ondragstart = function() {return false}

नोट: यह आपको draggable="false"प्रत्येक imgटैग में जोड़ने के लिए बचा सकता है जब आपको अभी भी क्लिक इवेंट (यानी आप उपयोग नहीं कर सकते हैं pointer-events: none) की आवश्यकता होती है, लेकिन ड्रैग आइकन छवि को प्रकट नहीं करना चाहते हैं।

Comments

एकमात्र उत्तर जो वास्तव में मेरे लिए काम करता है! न जाने क्यों यह उच्च मतदान नहीं है।

— एल्डरलोनौ

Answer 7

आप छवि को पृष्ठभूमि छवि के रूप में सेट कर सकते हैं। चूंकि यह एक में रहता है div, और divयह अजेय है, इसलिए छवि अजेय होगी:

<div style="background-image: url("image.jpg");">
</div>

Answer 8

मैंने एक दिव्य तत्व बनाया, जिसका आकार चित्र के समान है और छवि के शीर्ष पर स्थित है । फिर, माउस इवेंट छवि तत्व पर नहीं जाते हैं।