ఆండ్రాగ్ డ్రాప్ ఇవెంట్

课程表

JS 参考手册

JavaScript

Window

HTML DOM

Web API

HTML ఆబ్జెక్ట్

</a></li> <li><a href="/te/jsref/dom_obj_time.html" title="హెచ్టిఎంఎల్ డొమ్ టైమ్ ఆబ్జెక్ట్"><time></a></li> <li><a href="/te/jsref/dom_obj_title.html" title="హెచ్టిఎంఎల్ డొమ్ టైటిల్ ఆబ్జెక్ట్"><title></a></li> <li><a href="/te/jsref/dom_obj_track.html" title="హెచ్టిఎంఎల్ డొమ్ ట్రాక్ ఆబ్జెక్ట్"><track></a></li> <li><a href="/te/jsref/dom_obj_u.html" title="హెచ్టిఎంఎల్ డొమ్ అండర్లైన్ ఆబ్జెక్ట్"><u></a></li> <li><a href="/te/jsref/dom_obj_ul.html" title="హెచ్టిఎంఎల్ డొమ్ అల్ ఆబ్జెక్ట్"><ul></a></li> <li><a href="/te/jsref/dom_obj_var.html" title="హెచ్టిఎంఎల్ డొమ్ వేరియబుల్ ఆబ్జెక్ట్"><var></a></li> <li><a href="/te/jsref/dom_obj_video.html" title="హెచ్టిఎంఎల్ డొమ్ వీడియో ఆబ్జెక్ట్"><video></a></li> </ul> <h2>其他参考手册</h2> <ul> <li><a href="/te/jsref/obj_cssstyledeclaration.html" title="సిఎస్ఎస్ స్టైల్ డిక్లరేషన్ ఆబ్జెక్ట్">CSSStyleDeclaration</a></li> <li><a href="/te/jsref/jsref_type_conversion.html" title="జావాస్క్రిప్ట్ టైప్ కన్వర్షన్">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>ఆండ్రాగ్ డ్రాప్ ఇవెంట్</h1> <div class="btn-toref"> <a href="/te/jsref/dom_obj_event.html" title="HTML DOM ఇవెంట్స్">DOM 事件</a> <a href="/te/jsref/obj_dragevent.html" title="హెచ్టిఎంఎల్ డొమ్ డ్రాగ్ ఇవెంట్">DragEvent</a> </div> <div> <h2>定义和用法</h2> <p>当可拖动元素或文本选择放置在有效放置目标上时，会发生 ondrop 事件。</p> <p>拖放是 HTML5 中非常常见的功能。就是当您“抓取”一个对象并将其拖动到不同位置时。如需学习更多知识，请阅读我们关于 <a href="/te/html/html5_draganddrop.html" title="హెచ్టిఎంఎల్ 5 డ్రాగ్ అన్ డ్ పోస్">హెచ్టిఎంఎల్ 5 డ్రాగ్ అన్ డ్ పోస్</a>డ్రాగ్‌బుల్ హ్ట్మ్ల్ 5 లో చాలా సాధార‌ణ సామ‌ర్థ్యం. మీరు ఒక వస్తువును "పిట్టుకుని" మ‌రియు వివిధ స్థానాల‌కు డ్రాగ్ చేయడం ప్రారంభించాలి. మ‌రింత కింది కింది ను చ‌ద‌వండి మ‌రియు నాకు సంబంధించిన విష‌యాలు నేర్చుకోండి చేయండి.</p> <p class="note"><span>ప్రశ్నా:</span>ఎలమెంట్‌ను డ్రాగ‌బుల్ చేయడానికి వినియోగించండి స‌ర్వ‌స‌మాన హ్ట్మ్ల్ నిర్వ‌హ‌ణ శిక్ష‌ణాలు. <a href="/te/tags/att_global_draggable.html" title="హెచ్టిఎంఎల్ డ్రాగబుల్ అట్రిబ్యూట్">హ్ట్మ్ల్ 5 డ్రాగ‌బుల్ ల‌క్ష్యం</a>。</p> <p class="tip"><span>సూచ‌న‌:</span>డిఫాల్ట్ లో, లింకులు మరియు చిత్రాలు డ్రాగ‌బుల్ అని ప‌రిగ‌ణించ‌బడతాయి మ‌రియు draggable ల‌క్ష్యం ఉప‌యోగించ‌బడ‌దు.</p> <p>డ్రాగ్‌బుల్ ఆప‌రేష‌న్ వివిధ ద‌శ‌ల‌లో, అనేక ఘ‌ట‌న‌లు ఉప‌యోగించ‌బ‌డి ఉంటాయి మ‌రియు జ‌రుగుతాయి ఉంటాయి:</p> <p>డ్రాగ‌బుల్ ల‌క్ష్యం (స్రోత ఎలమెంట్‌) పై ప్ర‌త్యక్షంగా ప్రేరేపించబడుతున్న ఘ‌ట‌న‌లు:</p> <ul> <li><a href="/te/jsref/event_ondragstart.html" title="ఆండ్రాగ్స్టార్ట్ ఇవెంట్">ondragstart</a> - యూజ‌ర్‌ను డ్రాగ్ చేయడం ప్రారంభించినప్పుడు జ‌రుగుతుంది</li> <li><a href="/te/jsref/event_ondrag.html" title="ఆండ్రాగ్ ఇవెంట్">ondrag</a> - ఎలమెంట్‌ను డ్రాగ్ చేసినప్పుడు జ‌రుగుతుంది</li> <li><a href="/te/jsref/event_ondragend.html" title="ఆండ్రాగ్ ఎండ్ ఇవెంట్">ondragend</a> - డ్రాగ్‌బుల్ ఎలమెంట్‌ను పూర్తి చేసినప్పుడు జ‌రుగుతుంది</li> </ul> <p>ప్ర‌త్యక్షంగా ప్రేరేపించబడుతున్న ఘ‌ట‌న‌లు ప్ర‌త్య‌క్షంగా ప్రేరేపించబడుతున్న ఘ‌ట‌న‌లు:</p> <ul> <li><a href="/te/jsref/event_ondragenter.html" title="ఆండ్రాగ్ ఎంటర్ ఇవెంట్">ondragenter</a> - డ్రాగ్‌బుల్ ఎలమెంట్‌ను దారిబ‌ద్దంగా వెళ్ళినప్పుడు జ‌రుగుతుంది</li> <li><a href="/te/jsref/event_ondragover.html" title="ఆండ్రాగ్ ఓవర్ ఇవెంట్">ondragover</a> - డ్రాగ్‌బుల్ ఎలమెంట్‌ను దారిబ‌ద్దంగా ఉన్నప్పుడు జ‌రుగుతుంది</li> <li><a href="/te/jsref/event_ondragleave.html" title="ఆండ్రాగ్ లీవ్ ఇవెంట్">ondragleave</a> - డ్రాగ్‌బుల్ ఎలమెంట్‌ను దారిబ‌ద్దంగా పోయినప్పుడు జ‌రుగుతుంది</li> <li><a href="/te/jsref/event_ondrop.html" title="ఆండ్రాగ్ డ్రాప్ ఇవెంట్">ondrop</a> - డ్రాగ్‌బుల్ ఎలమెంట్‌ను దారిబ‌ద్దంగా పెట్టినప్పుడు జ‌రుగుతుంది</li> </ul> </div> <div> <h2>ఉదాహరణ</h2> <p>డివ్‌ ఎలమెంట్‌లో ట్రాగ‌బుల్ ఎలమెంట్‌ను పెట్టినప్పుడు జావాస్క్రిప్ట్‌ను నిర్వ‌హించండి:</p> <pre class="language-html"> <div ondrop="myFunction(event)"></div> </pre> <p class="tiy"><a target="_blank" href="/te/tiy/t.html?f=event_ondrop">స్వయంగా ప్రయత్నించండి</a></p> <p>పేజీ కింద మరిన్ని TIY ఉదాహరణలు ఉన్నాయి。</p> </div> <div> <h2>సంకేతం</h2> <p>హ్ట్మ్ల్‌లో:</p> <pre class="language-html"> <<i>element</i> ondrop="<i>myScript</i>"> </pre> <p class="tiy"><a target="_blank" href="/te/tiy/t.html?f=event_ondrop_html">స్వయంగా ప్రయత్నించండి</a></p> <p>జావాస్క్రిప్ట్‌లో:</p> <pre class="language-js"> <i>object</i>.ondrop = function(){<i>myScript</i>}; </pre> <p class="tiy"><a target="_blank" href="/te/tiy/t.html?f=event_ondrop_dom">స్వయంగా ప్రయత్నించండి</a></p> <p>జావాస్క్రిప్ట్‌లో కాల్పనిక కార్యక్రమం ఉపయోగించండి addEventListener() మాదిరిగా:</p> <pre class="language-js"> <i>object</i>.addEventListener("drop", <i>myScript</i>); </pre> <p class="tiy"><a target="_blank" href="/te/tiy/t.html?f=event_ondrop_addeventlistener">స్వయంగా ప్రయత్నించండి</a></p> <p class="note"><span>ప్రశ్నా:</span>ఇంటర్నెట్ ఎక్స్‌లోరర్ 8 లేదా అంతకు ముంది వర్షాలు ఆధారితం కాదు <a href="/te/jsref/met_element_addeventlistener.html" title="హెచ్టిఎంఎల్ డొమ్ ఆడ్డ్ ఎవెంట్ లిస్ట్నర్ మథోడ్">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="హెచ్టిఎంఎల్ డొమ్ డ్రాగ్ ఇవెంట్">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>ondrop</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"; }); /* ----------------- డ్రాప్ టార్గెట్లో ప్రాచుర్యం జరిగే ఇన్సెంట్స్ ----------------- */ // డ్రాగబుల్ p ఎలమెంట్ డ్రాప్టేజ్టార్గ్ లోకి ప్రవేశించినప్పుడు, DIV యొక్క బార్డర్ స్టైల్ను మార్చండి document.addEventListener("dragenter", function(event) { if ( event.target.className == "droptarget" ) { event.target.style.border = "3px dotted red"; } }); // డిఫాల్ట్ విధంగా, ఇతర ఎలమెంట్స్ లో డేటా/ఎలమెంట్స్ ను డ్రాప్ చేయలేదు. డ్రాప్ అనుమతించడానికి, మాకు ఎలమెంట్స్ యొక్క డిఫాల్ట్ ప్రాసెసింగ్ నిరోధించవలసినది document.addEventListener("dragover", function(event) { event.preventDefault(); }); // డ్రాగబుల్ p ఎలమెంట్ డ్రాప్టేజ్టార్గ్ నుండి బయటకు వెళ్ళినప్పుడు, DIV యొక్క బార్డర్ స్టైల్ని పునఃస్థాపించండి 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="హెచ్టిఎంఎల్ 5 డ్రాగ్ అన్ డ్ పోస్">HTML శిక్షణా పత్రిక: HTML5 డ్రాగ్ అండ్ డ్రాప్</a></p> <p><a href="/te/tags/att_global_draggable.html" title="హెచ్టిఎంఎల్ డ్రాగబుల్ అట్రిబ్యూట్">HTML పరికల్పనా హాండ్బుక్: HTML డ్రాగబుల్ అట్రిబ్యూట్</a></p> </div> <div class="btn-toref"> <a href="/te/jsref/dom_obj_event.html" title="HTML DOM ఇవెంట్స్">DOM 事件</a> <a href="/te/jsref/obj_dragevent.html" title="హెచ్టిఎంఎల్ డొమ్ డ్రాగ్ ఇవెంట్">DragEvent</a> </div><div style="background-color:#fcfdf8; padding:0;"> </div> </div>  <div id="sidebar"> <div><h3><center> 工具箱 </center><h3> <h5 id="tools_reference"><a href="/te/jsref/index.html">JavaScript మరియు HTML DOM పరిచయం హాండ్బుక్</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="పవర్డ్ ద్వారా Ce4e.com"></a> </p> </div> </div>  <script src="/myjs/tongji.js"></script> </body> </html>