HTML तत्वों पर ड्रैग और ड्रॉप अक्षम करें?

109

मैं एक वेब एप्लिकेशन पर काम कर रहा हूं, जिसके लिए मैं एक पूर्ण विशेषताओं वाली विंडोिंग प्रणाली को लागू करने का प्रयास कर रहा हूं। अभी यह बहुत अच्छा चल रहा है, मैं केवल एक छोटी सी बात में भाग रहा हूं। कभी-कभी जब मैं अपने एप्लिकेशन का एक हिस्सा (सबसे अधिक बार मेरी खिड़की के कोने का हिस्सा, जो एक आकार के ऑपरेशन को ट्रिगर करने वाला होता है) को खींचने के लिए जाता हूं, तो वेब ब्राउज़र चतुर हो जाता है और सोचता है कि मेरा मतलब किसी चीज को खींचने और छोड़ने का है। अंतिम परिणाम, मेरी कार्रवाई पकड़ में आ जाती है जबकि ब्राउज़र अपनी ड्रैग और ड्रॉप चीज करता है।

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

संक्षेप में: मुझे ब्राउज़र पाठ चयन और ड्रैग-एंड-ड्रॉप फ़ंक्शन को अक्षम करने की आवश्यकता है, जबकि मेरे उपयोगकर्ता के पास माउस बटन है, और उपयोगकर्ता द्वारा माउस को रिलीज़ करने पर उस कार्यक्षमता को पुनर्स्थापित करें।

— निकोलस फ्लायंट
स्रोत

2

मैं इस बात को बढ़ावा दूंगा कि @ सिंटैक्सएयर का उत्तर (नीचे, 100+ वोट) चयनित उत्तर होना चाहिए, क्योंकि यह नॉन-ड्रैग ऑपरेशन को प्रभावित नहीं करता है।

— शॉन विल्सन

78

मूसडाउन ईवेंट पर डिफ़ॉल्ट को रोकने का प्रयास करें:

<div onmousedown="event.preventDefault ? event.preventDefault() : event.returnValue = false">asd</div>

या

<div onmousedown="return false">asd</div>

— सर्गेई इलिंस्की
स्रोत

2

+1 - हालाँकि, इसका फ़ायरफ़ॉक्स (6.0 और उससे कम) में दुर्भाग्यपूर्ण साइड-इफ़ेक्ट है जहाँ यह :activeतत्व पर छद्म वर्ग को लागू होने से रोकता है । इसका मतलब है कि मैं वास्तव में अपने लिंक के लिए इसका इस्तेमाल नहीं कर सकता।

— एंडी ई

3

क्षमा करें, यह भयानक है। नीचे देखें जवाब

— मैडब्रेक्स

216

यह बात काम करती है ..... कोशिश करो।

<BODY ondragstart="return false;" ondrop="return false;">

आशा करता हूँ की ये काम करेगा। धन्यवाद

— वक्य रचना त्रुटि
स्रोत

6

बहुत अच्छा काम करता है! (गुण को एक <div>तत्व पर भी रखा जा सकता है।)

— वासिलीनोविकोव

4

इस जवाब के लिए मतदान किया। मूसडाउन उत्तर IMO बहुत कम आता है (आप अन्य मामलों के लिए मूसडाउन ईवेंट का उपयोग कर सकते हैं)। यह जवाब पूरी तरह से ठीक काम किया :)

— डैनियल वैन डोमले

4

यह वास्तव में बहुत बेहतर उत्तर है, माउस डाउन पर 'preventDefault ()' के कई साइड इफेक्ट्स हैं (उदाहरण के लिए फॉर्म टेक्स्ट इनपुट के फोकस / अनफोकस को रोकने के लिए)

— Jecimi

यह स्वीकृत उत्तर होना चाहिए, क्योंकि यह क्लिक क्रिया को प्रभावित नहीं करेगा।

— राफेलमोरैस

copy pasteश्रोता के साथ यह युग्म ऐसा प्रतीत होता है कि पृष्ठ के अन्य हिस्सों को प्रतिकूल रूप से प्रभावित किए बिना किसी चीज़ को चिपकाने / खींचने के बजाय किसी उपयोगकर्ता को इनपुट में टाइप करने के लिए मजबूर करने के लिए सही समाधान है।

— डैनियल बॉननेल

21

आप केवल draggable="false"विशेषता का उपयोग करके ड्रैगिंग को अक्षम कर सकते हैं ।
http://www.w3schools.com/tags/att_global_draggable.asp

— icl7126
स्रोत

Chrome में आकर्षण की तरह काम करता है 59

— kashiraja

1

: यह स्वीकार किए जाते हैं जवाब, गैर जे एस, साधारण HTML विशेषता है जो सभी ब्राउज़र में समर्थित है होना चाहिए developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/...

— क्रिस

1

यह सबसे अच्छा जवाब है

— अरगुन

12

यह काम कर सकता है: आप पाठ, छवि और मूल रूप से सब कुछ के लिए css3 के साथ चयन को अक्षम कर सकते हैं।

.unselectable {
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;

   /*
     Introduced in IE 10.
     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
   */
   -ms-user-select: none;
   user-select: none;
}

बेशक केवल नए ब्राउज़रों के लिए। अधिक जानकारी के लिए जाँच करें:

CSS का उपयोग करके हाइलाइट किए गए टेक्स्ट चयन को कैसे अक्षम करें?

— बवास
स्रोत

बहुत बहुत धन्यवाद। मैं एक क्लिक-सक्षम चाहता हूं div, लेकिन ड्रैग अक्षम के साथ।

— Ionică Bizău

@ Ionică Bizău यदि आप चीजों को क्लिक करने योग्य बनाना चाहते हैं, तो बटन या टैग का उपयोग करना बेहतर है, क्योंकि कुछ उपकरण बिना पति और टचस्क्रीन के इनको पहचानेंगे और उपयोगकर्ताओं के लिए चयन करने योग्य बनाएंगे।

— तोश

8

JQuery के साथ यह कुछ इस तरह होगा:

$(document).ready(function() {
  $('#yourDiv').on('mousedown', function(e) {
      e.preventDefault();
  });
});

मेरे मामले में मैं इनपुट में ड्रॉप टेक्स्ट से उपयोगकर्ता को अक्षम करना चाहता था इसलिए मैंने "मूसडाउन" के बजाय "ड्रॉप" का उपयोग किया।

$(document).ready(function() {
  $('input').on('drop', function(event) {
    event.preventDefault();
  });
});

इसके बजाय event.preventDefault () आप गलत वापस कर सकते हैं। यहाँ अंतर है।

और कोड:

$(document).ready(function() {
  $('input').on('drop', function() {
    return false;
  });
});

— विक्टर रोमानो
स्रोत

2

यह एक ऐसा बेला है जिसे मैं हमेशा अपने वेब एप्लिकेशन के साथ उपयोग करता हूं:

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

यह आपके ऐप पर खींचे और गिराए जाने पर कुछ भी रोक देगा। दौरे की जरूरतों के आधार पर, आप बॉडी चयनकर्ता को किसी भी कंटेनर से बदल सकते हैं, जिसे बच्चों को नहीं खींचना चाहिए।

— फूल
स्रोत

0

इसे इस्तेमाल करे

$('#id').on('mousedown', function(event){
    event.preventDefault();
}

— crazyjune
स्रोत

0

के लिए inputतत्वों, इस सवाल का जवाब मेरे लिए काम करता है।

मैंने इसे कोणीय 4 में एक कस्टम इनपुट घटक पर लागू किया, लेकिन मुझे लगता है कि इसे शुद्ध जेएस के साथ लागू किया जा सकता है।

एचटीएमएल

<input type="text" [(ngModel)]="value" (ondragenter)="disableEvent($event)" 
(dragover)="disableEvent($event)" (ondrop)="disableEvent($event)"/>

घटक परिभाषा (JS):

export class CustomInputComponent { 

  //component construction and attribute definitions

  disableEvent(event) {
    event.preventDefault();
    return false;
  }
}

— टीटो लीवा
स्रोत

0

@ SyntaxError के उत्तर का उपयोग करके, https://stackoverflow.com/a/13745199/5134043

मैंने रिएक्ट में ऐसा करने में कामयाबी हासिल की है; एकमात्र तरीका जो मैं समझ सकता था वह था ondragstart और ondrop तरीकों को रेफरी में संलग्न करना, जैसे:

  const panelManagerBody = React.createRef<HTMLDivElement>();
  useEffect(() => {
    if (panelManagerBody.current) {
      panelManagerBody.current.ondragstart = () => false;
      panelManagerBody.current.ondrop = () => false;
    }
  }, [panelManagerBody]);

  return (
    <div ref={panelManagerBody}>

— kriskate
स्रोत

0

मैं इसे यहीं छोड़ दूंगा। सब कुछ आजमाने के बाद मेरी मदद की।

   $(document.body).bind("dragover", function(e) {
        e.preventDefault();
        return false;
   });

   $(document.body).bind("drop", function(e){
        e.preventDefault();
        return false;
   });

— checknov
स्रोत

-1

इस JQuery ने मेरे लिए काम किया: -

$(document).ready(function() {
  $('#con_image').on('mousedown', function(e) {
      e.preventDefault();
  });
});

— पीयूष
स्रोत