కోడ్ డబ్ల్యు డబ్ల్యు సి ఆన్లైన్ ట్యూటోరియల్
హ్ట్మ్ల్ సిరీస్ ట్యూటోరియల్
బ్రౌజర్ స్క్రిప్ట్
సర్వర్ స్క్రిప్ట్
ప్రోగ్రామింగ్ ట్యూటోరియల్
ఎక్స్ఎమ్ఎల్ సిరీస్ ట్యూటోరియల్
స్టాండర్డ్ వెబ్ సైట్ హాండ్బుక్
రిఫరెన్స్ హాండ్బుక్
కోర్సు సూచిక
జెఎస్ రెఫరెన్స్ మాన్యువల్
జెఎస్ రెఫరెన్స్ మాన్యువల్ (వర్గం క్రమంలో)
జెఎస్ రెఫరెన్స్ మాన్యువల్ (అక్షరాక్షరం క్రమంలో)
జావాస్క్రిప్ట్
జెఎస్ అరే
జెఎస్ బౌల్
జెఎస్ క్లాస్
జెఎస్ డేట్
జెఎస్ ఎరర్
జెఎస్ గ్లోబల్
జెఎస్ జెఎసాన్
జెఎస్ మాప్
జెఎస్ మాథ్
జెఎస్ నంబర్
జెఎస్ ప్రమీస్
జెఎస్ రెగ్యులార్ ఎక్స్ప్రెషన్
జెఎస్ సెట్
జెఎస్ స్ట్రింగ్
జెఎస్ ఆబ్జెక్ట్
జెఎస్ ఆపరేటర్
జెఎస్ ఆపరేటర్ ప్రియరిటీ
జెఎస్ స్టేట్ మెంట్
జెఎస్ టైపీడ్ అరే
విండో
విండో ఆబ్జెక్ట్
విండో కన్సోల్
విండో హిస్టరీ
విండో లొకేషన్
విండో నావిగేటర్
విండో స్క్రీన్
హెచ్టిఎంఎల్ డామ్
హెచ్టిఎంఎల్ డాక్యుమెంట్
హెచ్టిఎంఎల్ ఇల్మెంట్
హెచ్టిఎంఎల్ అట్రిబ్యూట్
హెచ్టిఎంఎల్ ఇవెంట్
హెచ్టిఎంఎల్ ఇవెంట్ ఆబ్జెక్ట్
హెచ్టిఎంఎల్ కలెక్షన్
హెచ్టిఎంఎల్ నోడ్ లిస్ట్
హెచ్టిఎంఎల్ డామ్టాన్ లిస్ట్
హెచ్టిఎంఎల్ స్టైల్
వెబ్ ఏపిఐ
ఏపిఐ కాన్వాస్
ఏపిఐ కన్సోల్
ఏపిఐ ఫెచ్
ఏపిఐ ఫుల్స్క్రీన్
ఏపిఐ జియోలోకేషన్
ఏపిఐ హిస్టరీ
ఏపిఐ మీడియా క్వీరీ లిస్ట్
ఏపిఐ స్టోరేజ్
ఏపిఐ వాలిడేషన్
వెబ్ ఏపిఐ
హెచ్టిఎంఎల్ ఆబ్జెక్ట్
<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>
</a></li> <li><a href="/te/jsref/dom_obj_time.html" title="HTML DOM Time ఆబ్జెక్ట్"><time></a></li> <li><a href="/te/jsref/dom_obj_title.html" title="HTML DOM Title ఆబ్జెక్ట్"><title></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 ఆబ్జెక్ట్"><var></a></li> </ul> <h2><video></h2> <ul> <li><a href="/te/jsref/obj_cssstyledeclaration.html" title="CSSStyleDeclaration ఆబ్జెక్ట్">ఇతర సూచనాలు</a></li> <li><a href="/te/jsref/jsref_type_conversion.html" title="JavaScript రకం మార్పు">CSSStyleDeclaration</a></li> </ul> </div> <div><h3><center> JS రకాల మార్పిడి </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>ondragend ఇవెంట్</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>నిర్వచనం మరియు ఉపయోగం</p> <p>డ్రాగ్ అనేది వినియోగదారుడు మెటీరియల్ లేదా టెక్స్ట్ డ్రాగ్ చేసిన తర్వాత జరుగుతుంది <a href="/te/html/html5_draganddrop.html" title="HTML5 డ్రాగ్ అనువర్తనం">HTML5 డ్రాగ్ అనువర్తనం</a>డ్రాగ్ అనేది HTML5లో చాలా సాధారణ సామర్థ్యం. ఇది మీరు ఒక వస్తువును "పట్టి" మరియు వివిధ స్థానాలకు డ్రాగ్ చేయడం. మరింత వివరాలను తెలుసుకోవడానికి, మా గురించి చదవండి</p> <p class="note"><span>పరిశీలన:</span>మెటీరియల్‌ను డ్రాగబడేగా చేయడానికి, విశ్వవ్యాప్తమైన HTML పాఠ్యక్రమాన్ని ఉపయోగించండి. <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> </div> <div> <h2>ఉదాహరణ</h2> <p>వినియోగదారుడు <p> మెటీరియల్‌ను డ్రాగ్ చేసిన తర్వాత జావాస్క్రిప్ట్ అమలు చేయబడుతుంది:</p> <pre class="language-html"> <p draggable="true" ondragend="myFunction(event)">నాకు డ్రాగ్ చేయండి!</p> </pre> <p class="tiy"><a target="_blank" href="/te/tiy/t.html?f=event_ondragstart">స్వయంగా ప్రయత్నించండి</a></p> <p>పేజీ కిందికి మరిన్ని TIY ఉదాహరణలు ఉన్నాయి。</p> </div> <div> <h2>సంకేతం</h2> <p>హైట్ముల్‌లో:</p> <pre class="language-html"> <<i>element</i> ondragend="<i>myScript</i>"> </pre> <p class="tiy"><a target="_blank" href="/te/tiy/t.html?f=event_ondragstart_html">స్వయంగా ప్రయత్నించండి</a></p> <p>జావాస్క్రిప్ట్‌లో:</p> <pre class="language-js"> <i>object</i>.ondragend = function(){<i>myScript</i>}; </pre> <p class="tiy"><a target="_blank" href="/te/tiy/t.html?f=event_ondragstart_dom">స్వయంగా ప్రయత్నించండి</a></p> <p>జావాస్క్రిప్ట్‌లో, addEventListener() మాధ్యమాన్ని ఉపయోగించడం:</p> <pre class="language-js"> <i>object</i>.addEventListener("dragend", <i>myScript</i>); </pre> <p class="tiy"><a target="_blank" href="/te/tiy/t.html?f=event_ondragstart_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>ondragend</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 元素进入 droptarget 时，改变 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 元素离开 droptarget 时，重置 DIV 的边框样式 document.addEventListener("dragleave", function(event) { if ( event.target.className == "droptarget" ) { event.target.style.border = ""; } }); /* On drop - 防止浏览器对数据的默认处理（默认放置时以链接打开） 重置输出文本的颜色和 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>