CodeW3C ఆన్లైన్ పాఠ్యపుస్తకం
HTML శ్రేణి పాఠ్యపుస్తకం
బ్రౌజర్ స్క్రిప్ట్
సర్వర్ స్క్రిప్ట్
ప్రోగ్రామింగ్ పాఠ్యపుస్తకం
XML శ్రేణి పాఠ్యపుస్తకం
నెట్వర్క్ పాఠ్యపుస్తకం
పరిచయపు పాఠ్యపుస్తకం
కోర్సు సబ్లాక్
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>
</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 ఆబ్జెక్ట్"><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>ondragenter ఈవెంట్</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>当可拖动元素或文本选择进入有效的放置目标时，会发生 ondragenter 事件。</p> <p>ondragenter 和 ondragleave 事件可以帮助用户了解某个可拖动元素即将进入或离开放置目标。例如，可通过在可拖动元素进入放置目标时设置背景颜色，并在元素移出目标时移除颜色来完成。</p> <p>డ్రాగ్ అండ్ డ్రాప్ అనేది హ్ట్మ్ల్ 5 లో చాలా సాధారణ ఫంక్షన్ ఉంది. అది మీరు ఒక ఆబ్జెక్ట్ను "పట్టి" వివిధ స్థానాలకు డ్రాగ్ చేస్తే. మరింత జ్ఞానాన్ని నేర్చుకోవడానికి, మా గురించి చదవండి <a href="/te/html/html5_draganddrop.html" title="HTML5 తీసుకురావడం">HTML5 తీసుకురావడం</a>హ్ట్మ్ల్ ట్యూటోరియల్.</p> <p class="note"><span>పరిశీలన:</span>ఎలమెంట్ను డ్రాగబుల్ చేయడానికి వినియోగించండి గ్లోబల్ <a href="/te/tags/att_global_draggable.html" title="HTML draggable లక్షణం">హ్ట్మ్ల్ 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 ఈవెంట్">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 ondragenter="myFunction(event)"></div> </pre> <p class="tiy"><a target="_blank" href="/te/tiy/t.html?f=event_ondragenter">మీరే ప్రయత్నించండి</a></p> <p>పేజీ కిందికి మరిన్ని TIY ఉదాహరణలు ఉన్నాయి。</p> </div> <div> <h2>సంకేతాలు</h2> <p>హ్ట్మ్ల్ లో:</p> <pre class="language-html"> <<i>element</i> ondragenter="<i>myScript</i>"> </pre> <p class="tiy"><a target="_blank" href="/te/tiy/t.html?f=event_ondragenter_html">మీరే ప్రయత్నించండి</a></p> <p>జావాస్క్రిప్ట్ లో:</p> <pre class="language-js"> <i>object</i>.ondragenter = function(){<i>myScript</i>}; </pre> <p class="tiy"><a target="_blank" href="/te/tiy/t.html?f=event_ondragenter_dom">మీరే ప్రయత్నించండి</a></p> <p>జావాస్క్రిప్ట్ లో ఉపయోగించడానికి addEventListener() మంథనం వినియోగించండి:</p> <pre class="language-js"> <i>object</i>.addEventListener("dragenter", <i>myScript</i>); </pre> <p class="tiy"><a target="_blank" href="/te/tiy/t.html?f=event_ondragenter_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>ondragenter</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="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="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>