Computer >> कंप्यूटर ट्यूटोरियल >  >> प्रोग्रामिंग >> JavaScript

JavaScript में कौन सा इवेंट तब होता है जब ड्रैग किया गया एलिमेंट टारगेट के ऊपर होता है?


ondragover इवेंट तब ट्रिगर होता है जब ड्रैग किया गया एलिमेंट ड्रॉप टारगेट के ऊपर होता है।

उदाहरण

JavaScript में ondragover इवेंट लागू करने का तरीका जानने के लिए निम्न कोड चलाएं:

<!DOCTYPE HTML> <html>    <head>       <style>          .drag {             float: left;             width: 100px;             height: 35px;             border: 2px dashed #876587;             margin: 15px;             padding: 10px;          }       </style>    </head>    <body>       <div class="drag" ondrop="drop(event)" ondragover="dropNow(event)">          <p ondragstart="dragStart(event)" ondragend="dragEnd(event)" draggable="true" id="dragtarget">Drag!</p>       </div>       <div class="drag" ondrop="drop(event)" ondragover="dropNow(event)"></div>       <div id="box"></div>       <p>Drag the left box to the right or drag the right box to the left.</p>       <script>          function dragStart(event) {             event.dataTransfer.setData("Text", event.target.id);           }           function dropNow(event) {             event.preventDefault();           }           function dragEnd(event) {             document.getElementById("box").innerHTML = "Dragging ends!";           }           function drop(event) {             event.preventDefault();             var data = event.dataTransfer.getData("Text");             event.target.appendChild(document.getElementById(data));             document.getElementById("box").innerHTML = "The element dropped successfully!";           }       </script>    </body> </html>

  1. JavaScript में निर्दिष्ट एलिमेंट में इवेंट हैंडलर कैसे जोड़ें JavaScript में निर्दिष्ट एलिमेंट में इवेंट हैंडलर कैसे जोड़ें

    JavaScript addEventListener() मेथड प्रदान करता है जो निर्दिष्ट एलिमेंट से इवेंट हैंडलर को जोड़ता है। यह मेथड मौजूदा इवेंट हैंडलर्स को ओवरराइट किए बिना किसी एलिमेंट से इवेंट हैंडलर जोड़ता है। एक समय में किसी एलिमेंट में कई इवेंट हैंडलर्स जोड़ना संभव है। addEventListener() मेथड यह नियंत्रित करना आसान

  1. जावास्क्रिप्ट में new.target जावास्क्रिप्ट में new.target

    new.target एक मेटाप्रॉपर्टी है जो हमें रनटाइम पर यह निर्धारित करने की अनुमति देती है कि कोई फ़ंक्शन या कंस्ट्रक्टर new कीवर्ड का उपयोग करके बुलाया गया था या नहीं। जावास्क्रिप्ट में new.target के लिए निम्नलिखित कोड है: उदाहरण <!DOCTYPE html> <html lang="en"> <head> <me

  1. - HTML में ड्रैग किया गया एलिमेंट ड्रॉप होने पर स्क्रिप्ट कैसे चलाएं?

    ondrop एट्रिब्यूट तब ट्रिगर होता है जब ड्रैग किया गया एलिमेंट वैलिड ड्रॉप टार्गेट पर ड्रॉप होता है। ड्रॉप होने के लिए टार्गेट पर ondragover में event.preventDefault() कॉल करना आवश्यक है। उदाहरण निम्न कोड से ondrop एट्रिब्यूट लागू करें: <!DOCTYPE HTML> <html> <head> <sty