ondragstart ఇవెంట్

课程表

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>ondragstart ఇవెంట్</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>ondragstart ఘటన వినియోగదారుడు మెటీరియల్‌ను డ్రాగ్ చేయడం ప్రారంభించినప్పుడు లేదా టెక్స్ట్ ఎంపిక చేసినప్పుడు జరుగుతుంది。</p> <p>డ్రాగ్‌బుల్ హ్ట్మ్ల్‌లో చాలా సాధారణ సామర్థ్యం ఉంది. అది, మీరు ఒక పదార్థాన్ని "పట్టి" వివిధ స్థానాలకు డ్రాగ్ చేస్తే జరుగుతుంది. మరింత వివరాలను తెలుసుకోవడానికి, మా గురించి చదవండి: <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 డ్రాగబుల్ అట్రిబ్యూట్">హ్ట్మ్ల్ 5 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" ondragstart="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> ondragstart="<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>.ondragstart = 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("dragstart", <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="హెచ్టిఎంఎల్ డొమ్ డ్రాగ్ ఇవెంట్">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>ondragstart</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 డ్రాగబుల్ అట్రిబ్యూట్">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>