కోడ్ డబ్ల్యు డబ్ల్యు సి ఆన్లైన్ టూట్రియల్
  • హెచ్టిఎమ్ఎల్ సిరీస్ టూట్రియల్
  • బ్రౌజర్ స్క్రిప్ట్
  • సర్వర్ స్క్రిప్ట్
  • ప్రోగ్రామింగ్ టూట్రియల్
  • ఎక్స్ఎమ్ఎల్ సిరీస్ టూట్రియల్
  • స్టాండర్డ్ వెబ్ సైట్ మ్యాన్యువల్
  • రెఫరెన్స్ మ్యాన్యువల్

కోర్సు సబ్లాక్

JS రిఫరెన్స్ మాన్యువల్

  • JS రిఫరెన్స్ మాన్యువల్ (వర్గం క్రమం ప్రకారం)
  • JS రిఫరెన్స్ మాన్యువల్ (అక్షరాక్షరాల క్రమం ప్రకారం)

JavaScript

  • JS అరేయస్
  • JS బౌలియన్
  • JS క్లాస్
  • JS డేట్
  • JS ఎరర్
  • JS గ్లోబల్
  • JS JSON
  • JS మాప్
  • JS మాథ్
  • JS నంబర్
  • JS ప్రమీస్
  • JS RegExp
  • JS సెట్
  • JS స్ట్రింగ్
  • JS ఆబ్జెక్ట్
  • JS ఆపరేటర్
  • JS ఆపరేటర్ ప్రాంకీరిటీ
  • JS స్టేట్‌మెంట్
  • JS టైపెడ్ అరేయస్

విండో

  • విండో ఆబ్జెక్ట్
  • విండో కన్సోల్
  • విండో హిస్టరీ
  • విండో లొకేషన్
  • విండో నావిగేటర్
  • విండో స్క్రీన్

HTML DOM

  • HTML డాక్యుమెంట్
  • HTML ఇలెమెంట్
  • HTML అట్రిబ్యూట్
  • HTML ఇవెంట్
  • HTML ఇవెంట్ ఆబ్జెక్ట్
  • HTML కలెక్షన్
  • HTML NodeList
  • HTML DOMTokenList
  • HTML స్టైల్

వెబ్ API

  • API కాన్వాస్
  • API కన్సోల్
  • API ఫెచ్
  • API ఫుల్‌స్క్రీన్
  • API జియోలోకేషన్
  • API హిస్టరీ
  • API MediaQueryList
  • API స్టోరేజ్
  • API వాలిడేషన్
  • వెబ్ API

HTML ఆబ్జెక్ట్

  • <a>
  • <abbr>
  • <address>
  • <area>
  • <article>
  • <aside>
  • <audio>
  • <b>
  • <base>
  • <bdo>
  • <blockquote>
  • <body>
  • <br>
  • <button>
  • <canvas>
  • <caption>
  • <cite>
  • <code>
  • <col>
  • <colgroup>
  • <datalist>
  • <dd>
  • <del>
  • <details>
  • <dfn>
  • <dialog>
  • <div>
  • <dl>
  • <dt>
  • <em>
  • <embed>
  • <fieldset>
  • <figcaption>
  • <figure>
  • <footer>
  • <form>
  • <head>
  • <header>
  • <h1> - <h6>
  • <hr>
  • <html>
  • <i>
  • <iframe>
  • <img>
  • <ins>
  • <input> button
  • <input> checkbox
  • <input> color
  • <input> date
  • <input> datetime
  • <input> datetime-local
  • <input> email
  • <input> file
  • <input> hidden
  • <input> image
  • <input> month
  • <input> number
  • <input> password
  • <input> radio
  • <input> range
  • <input> reset
  • <input> search
  • <input> submit
  • <input> text
  • <input> time
  • <input> url
  • <input> week
  • <kbd>
  • <label>
  • <legend>
  • <li>
  • <link>
  • <map>
  • <mark>
  • <menu>
  • <menuitem>
  • <meta>
  • <meter>
  • <nav>
  • <object>
  • <ol>
  • <optgroup>
  • <option>
  • <output>
  • <p>
  • <param>
  • <pre>
  • <progress>
  • <q>
  • <s>
  • <samp>
  • <script>
  • <section>
  • <select>
  • <small>
  • <source>
  • <span>
  • <strong>
  • <sub>
  • <summary>
  • <sup>
  • <table>
  • <tbody>
  • <td>
  • <tfoot>
  • <th>
  • <thead>
  • <tr>
  • <textarea>
  • <time>
  • </a></li> <li><a href="/te/jsref/dom_obj_track.html" title="HTML DOM Track ఆబ్జెక్ట్"><track></a></li> <li><a href="/te/jsref/dom_obj_u.html" title="HTML DOM Underline ఆబ్జెక్ట్"><u></a></li> <li><a href="/te/jsref/dom_obj_ul.html" title="HTML DOM Ul ఆబ్జెక్ట్"><ul></a></li> <li><a href="/te/jsref/dom_obj_var.html" title="HTML DOM Variable ఆబ్జెక్ట్"><var></a></li> <li><a href="/te/jsref/dom_obj_video.html" title="HTML DOM Video ఆబ్జెక్ట్"><video></a></li> </ul> <h2>其他参考手册</h2> <ul> <li><a href="/te/jsref/obj_cssstyledeclaration.html" title="CSSStyleDeclaration ఆబ్జెక్ట్">CSSStyleDeclaration</a></li> <li><a href="/te/jsref/jsref_type_conversion.html" title="JavaScript రకం మార్పు">JS 类型转换</a></li> </ul> </div> <div><h3><center> 选修课 </center><h3> <h2>课程推荐:</h2> <ul> <li><a href="/te/howto/index.html" title="CodeW3C.com పొరికి పెట్టిన వస్తువులు">CodeW3C.com పొరికి పెట్టిన వస్తువులు</a></li> </ul> </div> </div> <div id="maincontent"> <div class="idea"> <a href="/"><button>English</button></a> <a href="/zh/"><button>中文</button></a> <a href="/oldzh/"><button>繁體中文</button></a> <a href="/ru/"><button>Русский</button></a> <a href="/fr/"><button>Français</button></a> <a href="/de/"><button>Deutsch</button></a> <a href="/es/"><button>Español</button></a> <a href="/pt/"><button>Português</button></a> <a href="/ja/"><button>日本語</button></a> <a href="/ko/"><button>한국어</button></a> <a href="/it/"><button>Italiano</button></a> <a href="/ar/"><button>عربي</button></a> <a href="/hi/"><button>हिंदी</button></a> <a href="/bn/"><button>বাংলা</button></a> <a href="/ms/"><button>Bahasa Malaysia</button></a> <a href="/my/"><button>မြန်မာ</button></a> <a href="/vi/"><button>Tiếng Việt</button></a> <a href="/th/"><button>ภาษาไทย</button></a> <a href="/lo/"><button>ລາວ</button></a> <a href="/id/"><button>Bahasa Indonesia</button></a> <a href="/ur/"><button>اردو</button></a> <a href="/ha/"><button>Hausa</button></a> <a href="/pl/"><button>Język polski</button></a> <a href="/pa/"><button>ਪੰਜਾਬੀ</button></a> <a href="/sv/"><button>Svenska</button></a> <a href="/da/"><button>Dansk</button></a> <a href="/nl/"><button>Nederlands</button></a> <a href="/tr/"><button>Türkçe</button></a> <a href="/fi/"><button>suom.</button></a> <a href="/el/"><button>Ελληνικά</button></a> <a href="/fa/"><button>فارسی</button></a> <a href="/sw/"><button>Kiswahili</button></a> <a href="/te/"><button>తెలుగు</button></a> <a href="/tl/"><button>wikang Galu</button></a> </div> <h1>ondragover ఇవెంట్</h1> <div class="btn-toref"> <a href="/te/jsref/dom_obj_event.html" title="హెచ్టిఎమ్ఎల్ డామిన్ ఇవెంట్">DOM ఇవెంట్స్</a> <a href="/te/jsref/obj_dragevent.html" title="HTML DOM DragEvent">DragEvent</a> </div> <div> <h2>定义和用法</h2> <p>当可拖动元素或文本选择被拖动到有效放置目标上时,会发生 ondragover 事件。</p> <p>默认情况下,不能在其他元素中删除数据/元素。为了允许放置,我们必须阻止元素的默认处理。这是通过调用 ondragover 事件的 event.preventDefault() 方法来实现的。</p> <p>拖放是 HTML5 中非常常见的功能。就是当您“抓取”一个对象并将其拖动到不同位置时。如需学习更多知识,请阅读我们关于 <a href="/te/html/html5_draganddrop.html" title="HTML5 తీసుకువెళ్ళడం మరియు పెట్టడం">HTML5 తీసుకువెళ్ళడం మరియు పెట్టడం</a>的 HTML 教程。</p> <p class="note"><span>注释:</span>如需使元素可拖动,请使用全局 <a href="/te/tags/att_global_draggable.html" title="HTML draggable లక్షణం">HTML5 draggable 属性</a>。</p> <p class="tip"><span>提示:</span>默认情况下,链接和图像是可拖动的,不需要 draggable 属性。</p> <p>在拖放操作的不同阶段,有许多事件被使用,并且可能发生:</p> <p>在可拖动目标(源元素)上触发的事件:</p> <ul> <li><a href="/te/jsref/event_ondragstart.html" title="ondragstart ఇవెంట్">ondragstart</a> - 当用户开始拖动元素时发生</li> <li><a href="/te/jsref/event_ondrag.html" title="ondrag ఇవెంట్">ondrag</a> - 当元素被拖动时发生</li> <li><a href="/te/jsref/event_ondragend.html" title="ondragend ఇవెంట్">ondragend</a> - 当用户完成拖动元素时发生</li> </ul> <p>在放置目标上触发的事件:</p> <ul> <li><a href="/te/jsref/event_ondragenter.html" title="ondragenter ఇవెంట్">ondragenter</a> - 当被拖动的元素进入放置目标时发生</li> <li><a href="/te/jsref/event_ondragover.html" title="ondragover ఇవెంట్">ondragover</a> - 当被拖动的元素在放置目标上时发生</li> <li><a href="/te/jsref/event_ondragleave.html" title="ondragleave ఇవెంట్">ondragleave</a> - 当被拖动的元素离开放置目标时发生</li> <li><a href="/te/jsref/event_ondrop.html" title="ondrop ఇవెంట్">ondrop</a> - 当被拖动的元素被放在放置目标上时发生</li> </ul> <p class="note"><span>注释:</span>拖动元素时,ondragover 事件每 350 毫秒触发一次。</p> </div> <div> <h2>实例</h2> <p>当元素被拖放到放置目标上时执行 JavaScript:</p> <pre class="language-html"> <div ondragover="myFunction(event)"></div> </pre> <p class="tiy"><a target="_blank" href="/te/tiy/t.html?f=event_ondragover">మీరే ప్రయత్నించండి</a></p> <p>页面下方有更多 TIY 实例。</p> </div> <div> <h2>语法</h2> <p>在 HTML 中:</p> <pre class="language-html"> <<i>element</i> ondragover="<i>myScript</i>"> </pre> <p class="tiy"><a target="_blank" href="/te/tiy/t.html?f=event_ondragover_html">మీరే ప్రయత్నించండి</a></p> <p>在 JavaScript 中:</p> <pre class="language-js"> <i>object</i>.ondragover = function(){<i>myScript</i>}; </pre> <p class="tiy"><a target="_blank" href="/te/tiy/t.html?f=event_ondragover_dom">మీరే ప్రయత్నించండి</a></p> <p>在 JavaScript 中,使用 addEventListener() 方法:</p> <pre class="language-js"> <i>object</i>.addEventListener("dragover", <i>myScript</i>); </pre> <p class="tiy"><a target="_blank" href="/te/tiy/t.html?f=event_ondragover_addeventlistener">మీరే ప్రయత్నించండి</a></p> <p class="note"><span>注释:</span>ఇంటర్నెట్ ఎక్స్‌లోరర్ 8 లేదా ఆందరికి ముందు వరుసలు మద్దతు ఇవ్వడం లేదు <a href="/te/jsref/met_element_addeventlistener.html" title="HTML DOM addEventListener() పద్ధతి">addEventListener() పద్ధతి</a>。</p> </div> <div> <h2>సాంకేతిక వివరాలు</h2> <table class="definition-usage"> <tr> <th>బ్యూమింగ్ ప్రక్రియ లో ఉంటుంది:</th> <td>మద్దతు పొందుతుంది</td> </tr> <tr> <th>రద్దు చేయదగినది:</th> <td>మద్దతు పొందుతుంది</td> </tr> <tr> <th>సంఘటన రకం:</th> <td><a href="/te/jsref/obj_dragevent.html" title="HTML DOM DragEvent">DragEvent</a></td> </tr> <tr> <th>మద్దతు పొందే HTML టాగ్స్:</th> <td>అన్ని HTML ఎలమెంట్స్</td> </tr> <tr> <th style="width: 25%;">DOM సంస్కరణ:</th> <td>స్థాయి 3 సంఘటనలు</td> </tr> </table> </div> <div> <h2>బ్రౌజర్ మద్దతు</h2> <p>పట్టికలో వివరించిన సంఘటనలను పూర్తిగా పరిగణించే మొదటి బ్రౌజర్ సంస్కరణలు.</p> <table class="browser-support"> <tr> <th class="bsTh">సంఘటన</th> <th class="bsChrome">చ్రోమ్</th> <th class="bsIE">ఐఇ</th> <th class="bsFirefox">ఫైర్ఫాక్స్</th> <th class="bsSafari">సఫారీ</th> <th class="bsOpera">ఓపెరా</th> </tr> <tr> <td>ondragover</td> <td>4.0</td> <td>9.0</td> <td>3.5</td> <td>6.0</td> <td>12.0</td> </tr> </table> </div> <div> <h2>మరిన్ని ఉదాహరణలు</h2> <p>ప్రతీ సాధ్యమైన డ్రాగ్ ఎండ్ డ్రాప్ సంఘటనల ప్రదర్శన:</p> <pre class="language-html"> <p draggable="true" id="dragtarget">డ్రాగ్ నాకు!</p> <div class="droptarget">ఇక్కడ డ్రాప్ చేయండి!</div> <script> /* ----------------- డ్రాగ్ లక్ష్యంపై తీసుకువచ్చే సంఘటనలను ----------------- */ document.addEventListener("dragstart", function(event) { // dataTransfer.setData() పద్ధతి డ్రాగబలిత డాటా యొక్క డాటా రకాన్ని మరియు విలువను నిర్ణయిస్తుంది event.dataTransfer.setData("Text", event.target.id); // డ్రాగింగ్ ప్ ఎలమెంట్ ప్రారంభం అయిన తర్వాత పదబంధాన్ని అవుట్పుట్ చేయండి document.getElementById("demo").innerHTML = "డ్రాగింగ్ ప్ ఎలమెంట్ ప్రారంభం అయినప్పుడు పదబంధాన్ని అవుట్పుట్ చేయండి."; // డ్రాగబలిత ఎలమెంట్ అస్తిత్వం పరిమాణాన్ని మార్చండి event.target.style.opacity = "0.4"; }); // డ్రాగింగ్ ప్ ఎలమెంట్ చేయడంలో పదబంధాన్ని రంగును మార్చండి document.addEventListener("drag", function(event) { document.getElementById("demo").style.color = "red"; }); // డ్రాగింగ్ ప్ ఎలమెంట్ పూర్తి అయిన తర్వాత పదబంధాన్ని అవుట్పుట్ చేసి అస్తిత్వం పరిమాణాన్ని పునఃసంస్థాపించండి document.addEventListener("dragend", function(event) { document.getElementById("demo").innerHTML = "డ్రాగింగ్ ప్ ఎలమెంట్ పూర్తి అయినప్పుడు."; event.target.style.opacity = "1"; }); /* ----------------- డ్రాప్ టాగెట్లో జరుగుతున్న ఇవెంట్లు ----------------- */ // డ్రాగబుల్ ప్ కెమెంట్ డ్రాప్టెర్టాగ్లోకి ఎంటర్ చేసినప్పుడు డివ్ యొక్క బార్డర్ స్టైల్ను మార్చండి document.addEventListener("dragenter", function(event) { if ( event.target.className == "droptarget" ) { event.target.style.border = "3px dotted red"; } }); // డిఫాల్ట్ విధంగా, కార్యక్రమాలను మరొక కెమెంట్లో డ్రాప్ చేయలేము/డ్రాగ్ చేయలేము. డ్రాప్ అనుమతించడానికి, మాదిరిగా కెమెంట్ల యొక్క డిఫాల్ట్ హాండింగ్ను నిరోధించాలి document.addEventListener("dragover", function(event) { event.preventDefault(); }); // డ్రాగబుల్ ప్ కెమెంట్ డ్రాప్టెర్టాగ్ నుండి బయటకు వెళ్ళినప్పుడు డివ్ యొక్క బార్డర్ స్టైల్ను పునఃస్థాపించండి document.addEventListener("dragleave", function(event) { if ( event.target.className == "droptarget" ) { event.target.style.border = ""; } }); /* డ్రాప్ అయ్యేటప్పుడు - బ్రౌజర్ యొక్క డేటా యొక్క డిఫాల్ట్ హాండింగ్ నిరోధించండి (డిఫాల్ట్ డ్రాప్ చేసినప్పుడు లింక్ ఆపెన్ చేస్తారు) అవుట్పుట్ టెక్స్ట్ యొక్క రంగును మరియు DIV యొక్క బార్డర్ రంగును పునఃస్థాపించండి dataTransfer.getData() మాదిరిగా డ్రాగ్ చేసిన డేటాను పొందండి డ్రాగ్ చేసిన డేటా డ్రాగ్ అయ్యే కెమెంట్ యొక్క id ("drag1") డ్రాగ్ అయ్యే కెమెంట్ను డ్రాప్ కెమెంట్లో జతచేయండి */ document.addEventListener("drop", function(event) { event.preventDefault(); if ( event.target.className == "droptarget" ) { document.getElementById("demo").style.color = ""; event.target.style.border = ""; var data = event.dataTransfer.getData("Text"); event.target.appendChild(document.getElementById(data)); } }); </script> </pre> <p class="tiy"><a target="_blank" href="/te/tiy/t.html?f=event_ondrag_all">మీరే ప్రయత్నించండి</a></p> </div> <div> <h2>సంబంధిత పేజీలు</h2> <p><a href="/te/html/html5_draganddrop.html" title="HTML5 తీసుకువెళ్ళడం మరియు పెట్టడం">HTML పాఠ్యం: HTML5 డ్రాగ్ అండ్ డ్రాప్</a></p> <p><a href="/te/tags/att_global_draggable.html" title="HTML draggable లక్షణం">HTML పరికరం: HTML డ్రాగబుల్ లక్షణం</a></p> </div> <div class="btn-toref"> <a href="/te/jsref/dom_obj_event.html" title="హెచ్టిఎమ్ఎల్ డామిన్ ఇవెంట్">DOM ఇవెంట్స్</a> <a href="/te/jsref/obj_dragevent.html" title="HTML DOM DragEvent">DragEvent</a> </div><div style="background-color:#fcfdf8; padding:0;"> </div> </div> <!-- maincontent end --> <div id="sidebar"> <div><h3><center> పరికరాల పట్టిక </center><h3> <h5 id="tools_reference"><a href="/te/jsref/index.html">జావాస్క్రిప్ట్ అండ్ హెచ్టిఎమ్ఎల్ డామిన్ రఫరెన్స్ మ్యాన్యువల్</a></h5> <h5 id="tools_example"><a href="/te/js/js_examples.html">JavaScript ఉదాహరణలు</a></h5> <h5 id="tools_quiz"><a href="/te/js/js_quiz.html">JavaScript పరీక్ష</a></h5> <h5 id="tools_tutorial"><a href="/te/js/index.html">JavaScript శిక్షణానువాదం</a></h5> </div> <div><h3><center> ప్రాయోజిత లింకులు </center><h3> <div id="sbtg"> <script src="/myjs/zzsr.js"></script> </div> </div> </div> <div id="footer"> <p id="p1"> CodeW3C.com అందించిన విషయాలు శిక్షణ మరియు పరీక్షకు ఉపయోగపడతాయి, విషయాల యొక్క నిజత్వాన్ని హామీ ఇవ్వడం లేదు. ఈ సైట్ విషయాలను ఉపయోగించడం ద్వారా వచ్చే అపాయాలు ఈ సైట్ తో సంబంధం లేవు. అధికారం కలిగిన, అన్ని హక్కులు పరిరక్షించబడినవి. </p> <p id="p2"> <a href="/te/about/index.html" title="గురించి CodeW3C.com">గురించి CodeW3C.com</a> <a href="/te/about/about_helping.html" title="సహాయం CodeW3C.com">సహాయం CodeW3C.com</a> <a href="/te/about/about_use.html" title="ఉపయోగం గురించి">ఉపయోగ నిబంధనలు</a> <a href="/te/about/about_privacy.html" title="గోప్యతగా గురించి">గోప్యత నిబంధనలు</a> <a href="http://www.comfortsoftwaregroup.com/" target="_blank"><img src="/comfortsoftwaregroup.png"></a> <a href="http://www.ce4e.com/" target="_blank"><img src="/poweredby.png" alt="పవర్డ్ బై సీ4ఈ కామ్"></a> </p> </div> </div> <!-- wrapper end --> <script src="/myjs/tongji.js"></script> </body> </html>