CodeW3C ఆన్లైన్ పాఠ్యపుస్తకం
HTML శ్రేణి పాఠ్యపుస్తకం
బ్రౌజర్ స్క్రిప్ట్
సర్వర్ స్క్రిప్ట్
ప్రోగ్రామింగ్ పాఠ్యపుస్తకం
XML శ్రేణి పాఠ్యపుస్తకం
నిర్మాణం మాన్యలు
పరిచయపు మాన్యలు
కోర్సు సబ్లూట్
జెఎస్ రిఫరెన్స్ మాన్యువల్
జెఎస్ రిఫరెన్స్ మాన్యువల్ (వర్గక్రమం ప్రకారం)
జెఎస్ రిఫరెన్స్ మాన్యువల్ (అక్షర క్రమం ప్రకారం)
జావాస్క్రిప్ట్
జెఎస్ అరే
జెఎస్ బౌల్
జెఎస్ క్లాస్
జెఎస్ డేట్
జెఎస్ ఎరర్
జెఎస్ గ్లోబల్
జెఎస్ జెఐఎసాన్
జెఎస్ మాప్
జెఎస్ మాథ్
జెఎస్ నంబర్
జెఎస్ ప్రమీస్
జెఎస్ రెగ్ ఎక్స్ప్రెషన్
జెఎస్ సెట్
జెఎస్ స్ట్రింగ్
జెఎస్ ఆబ్జెక్ట్
జెఎస్ ఆపరేటర్
జెఎస్ ఆపరేటర్ ప్రియరిటీ
జెఎస్ స్టేట్మెంట్
జెఎస్ టైపైజ్డ్ అరే
విండో
విండో ఆబ్జెక్ట్
విండో కన్సోల్
విండో హిస్టరీ
విండో లొకేషన్
విండో నావిగేటర్
విండో స్క్రీన్
హెచ్‌టిఎంఎల్ డామిన్
హెచ్‌టిఎంఎల్ డాక్యుమెంట్
హెచ్‌టిఎంఎల్ ఇల్ మెంట్
హెచ్‌టిఎంఎల్ అట్రిబ్యూట్
హెచ్‌టిఎంఎల్ ఇవెంట్
హెచ్‌టిఎంఎల్ ఇవెంట్ ఆబ్జెక్ట్
హెచ్‌టిఎంఎల్ కలెక్షన్
హెచ్‌టిఎంఎల్ నోడ్ లిస్ట్
హెచ్‌టిఎంఎల్ డామిన్ టాకెన్ లిస్ట్
హెచ్‌టిఎంఎల్ స్టైల్
వెబ్ ఎపిఐ
ఎపిఐ కాన్వాస్
ఎపిఐ కన్సోల్
ఎపిఐ ఫెచ్
ఎపిఐ ఫుల్‌స్క్రీన్
ఎపిఐ జియోలోకేషన్
ఎపిఐ హిస్టరీ
ఎపిఐ మీడియా క్వీరీ లిస్ట్
ఎపిఐ స్టోరేజ్
ఎపిఐ వాలిడేషన్
వెబ్ ఎపిఐ
హెచ్‌టిఎంఎల్ ఆబ్జెక్ట్
<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>
</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>ondragleave ఇంజెక్షన్</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="HTML DOM DragEvent">DragEvent</a> </div> <div> <h2>定义和用法</h2> <p>当可拖动元素或文本选择离开有效放置目标时，会发生 ondragleave 事件。</p> <p>ondragenter 和 ondragleave 事件可以帮助用户了解某个可拖动元素即将进入或离开放置目标。例如，可通过在可拖动元素进入放置目标时设置背景颜色，并在元素移出目标时移除颜色来完成。</p> <p>ondragenter మరియు ondragleave సంఘటనలు డ్రాగబుల్ అంశం అనేకానేకాని డ్రాగ్ టార్గెట్‌లోకి ఎంటర్ అయ్యేటప్పుడు లేదా బయటకు వెళ్ళేటప్పుడు వినియోగదారులకు సహాయపడతాయి. ఉదాహరణకు, డ్రాగబుల్ అంశం డ్రాగ్ టార్గెట్‌లోకి ఎంటర్ అయినప్పుడు బ్యాక్‌గ్రౌండ్ కలర్ సెట్ చేయడం మరియు అంశం బయటకు వెళ్ళినప్పుడు కలర్ తొలగించడం చేయవచ్చు. <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> <pre class="language-html"> <div ondragleave="myFunction(event)"></div> </pre> <p class="tiy"><a target="_blank" href="/te/tiy/t.html?f=jsck_error_message">మీరే ప్రయత్నించండి</a></p> <p>పేజీ కిందికి మరిన్ని TIY ఉదాహరణలు ఉన్నాయి。</p> </div> <div> <h2>సంకేతం</h2> <p>హెచ్‌టిఎమ్ఎల్‌లో:</p> <pre class="language-html"> <<i>element</i> ondragleave="<i>myScript</i>"> </pre> <p class="tiy"><a target="_blank" href="/te/tiy/t.html?f=jsck_error_message">మీరే ప్రయత్నించండి</a></p> <p>జావాస్క్రిప్ట్‌లో:</p> <pre class="language-js"> <i>object</i>.ondragleave = function(){<i>myScript</i>}; </pre> <p class="tiy"><a target="_blank" href="/te/tiy/t.html?f=jsck_error_message">మీరే ప్రయత్నించండి</a></p> <p>జావాస్క్రిప్ట్‌లో కాల్పనికంగా addEventListener() పద్ధతిని ఉపయోగించండి:</p> <pre class="language-js"> <i>object</i>.addEventListener("dragleave", <i>myScript</i>); </pre> <p class="tiy"><a target="_blank" href="/te/tiy/t.html?f=jsck_error_message">మీరే ప్రయత్నించండి</a></p> <p class="note"><span>అన్నాటికే పద్ధతిమీద వివరణలు:</span>Internet Explorer 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>ondragleave</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 ఎలమెంట్ డ్రాప్ట్టర్గుంటే బోర్డర్ స్టైల్ ను మార్చండి 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 ఎలమెంట్ డ్రాప్ట్టర్గుంటే బోర్డర్ స్టైల్ ను పునఃస్థాపించండి 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 పరికళ్పన హాండబుల్ అట్రిబ్యూట్</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="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">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> <!-- wrapper end --> <script src="/myjs/tongji.js"></script> </body> </html>