ondrop ဖြစ်ပေါ်စဉ်

Timetable

JS Reference Manual

JavaScript

Window

HTML DOM

Web API

HTML အပေါင်း

</a></li> <li><a href="/my/jsref/dom_obj_time.html" title="HTML DOM Time အားကစားအက်ဥ်"><time></a></li> <li><a href="/my/jsref/dom_obj_title.html" title="HTML DOM Title အားကစားအက်ဥ်"><title></a></li> <li><a href="/my/jsref/dom_obj_track.html" title="HTML DOM Track အားကစားအက်ဥ်"><track></a></li> <li><a href="/my/jsref/dom_obj_u.html" title="HTML DOM Underline အားကစားအက်ဥ်"><u></a></li> <li><a href="/my/jsref/dom_obj_ul.html" title="HTML DOM Ul အားကစားအက်ဥ်"><ul></a></li> <li><a href="/my/jsref/dom_obj_var.html" title="HTML DOM Variable အားကစားအက်ဥ်"><var></a></li> <li><a href="/my/jsref/dom_obj_video.html" title="HTML DOM Video အားကစားအက်ဥ်"><video></a></li> </ul> <h2>其他参考手册</h2> <ul> <li><a href="/my/jsref/obj_cssstyledeclaration.html" title="CSSStyleDeclaration အားကစားအက်ဥ်">CSSStyleDeclaration</a></li> <li><a href="/my/jsref/jsref_type_conversion.html" title="JavaScript အမျိုးအစားပြောင်းလဲခြင်း">JS 类型转换</a></li> </ul> </div> <div><h3><center> 选修课 </center><h3> <h2>课程推荐：</h2> <ul> <li><a href="/my/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>ondrop ဖြစ်ပေါ်စဉ်</h1> <div class="btn-toref"> <a href="/my/jsref/dom_obj_event.html" title="HTML DOM အခင်းအတာ">DOM ဖြစ်ပေါ်စဉ်</a> <a href="/my/jsref/obj_dragevent.html" title="HTML DOM DragEvent">DragEvent</a> </div> <div> <h2>定义和用法</h2> <p>当可拖动元素或文本选择放置在有效放置目标上时，会发生 ondrop 事件。</p> <p>ဖြင့်ဆိပ်ဆောင် အခြေခံ <a href="/my/html/html5_draganddrop.html" title="HTML5 ဖြတ်သန်းခြင်း">HTML5 ဖြတ်သန်းခြင်း</a>ဂျပန်ဘာသာ HTML ပြည့်ပြည့် ပြောရိုက်ချက်</p> <p class="note"><span>အစီရင်ခံပါ</span>အရာကို ဖြင့်ဆိပ်ဆောင်ဖြင့် ပြုလုပ်ရန် <a href="/my/tags/att_global_draggable.html" title="HTML draggable ဗဟုသုတ">HTML5 draggable အခြေခံ</a>。</p> <p class="tip"><span>အကြံပေး</span>ပုံမှန်အားဖြင့်，လွှတ်တမ်းနှင့် ပုံများ ဖြင့်ဆိပ်ဆောင်ဖြစ်သည် မှာ ဖြင့်ဆိပ်ဆောင်ဖြင့် ဖြင့်ဆိပ်ဆောင်ပြီး အသုံးပြုရသည် မှာ မပါဘဲ</p> <p>ဖြင့်ဆိပ်ဆောင် လှုပ်ရှားပုံ အခြား အချက်အလက်များ အသုံးပြုပြီး ဖြစ်နိုင်သည်</p> <p>ဖြင့်ဆိပ်ဆောင်အောက်တွင် ဖြင့်ဆိပ်ဆောင်ဖြစ်သော အချက်အလက်</p> <ul> <li><a href="/my/jsref/event_ondragstart.html" title="ondragstart ဖြစ်ပေါ်စဉ်">ondragstart</a> - ဖြင့်ဆိပ်ဆောင်ကို ဖြင့်ဆိပ်ဆောင်အောက်သို့ ဖြင့်ဆိပ်ဆောင်ပြီးသောအခါ</li> <li><a href="/my/jsref/event_ondrag.html" title="ondrag ဖြစ်ပေါ်စဉ်">ondrag</a> - ဖြင့်ဆိပ်ဆောင်ကို ဖြင့်ဆိပ်ဆောင်အောက်သို့ ဖြင့်ဆိပ်ဆောင်ကို ဖြင့်ဆိပ်ဆောင်ပြီးသောအခါ</li> <li><a href="/my/jsref/event_ondragend.html" title="ondragend ဖြစ်ပေါ်စဉ်">ondragend</a> - ဖြင့်ဆိပ်ဆောင်ကို ဖြင့်ဆိပ်ဆောင်အောက်သို့ ဖြင့်ဆိပ်ဆောင်သွားသောအခါ</li> </ul> <p>ဖြင့်ဆိပ်ဆောင်အောက်တွင် ဖြင့်ဆိပ်ဆောင်ဖြစ်သော အချက်အလက်</p> <ul> <li><a href="/my/jsref/event_ondragenter.html" title="ondragenter ဖြစ်ပေါ်စဉ်">ondragenter</a> - ဖြင့်ဆိပ်ဆောင်အောက်သို့ ဖြင့်ဆိပ်ဆောင်ဝင်သောအခါ</li> <li><a href="/my/jsref/event_ondragover.html" title="ondragover ဖြစ်ပေါ်စဉ်">ondragover</a> - ဖြင့်ဆိပ်ဆောင်အောက်တွင် ဖြင့်ဆိပ်ဆောင်ရှိသောအခါ</li> <li><a href="/my/jsref/event_ondragleave.html" title="ondragleave ဖြစ်ပေါ်စဉ်">ondragleave</a> - ဖြင့်ဆိပ်ဆောင်မှ ဖြင့်ဆိပ်ဆောင်ကို ဖြိုသွားသောအခါ</li> <li><a href="/my/jsref/event_ondrop.html" title="ondrop ဖြစ်ပေါ်စဉ်">ondrop</a> - ဖြင့်ဆိပ်ဆောင်အောက်သို့ ဖြင့်ဆိပ်ဆောင်ကို သတ်မှတ်သောအခါ</li> </ul> </div> <div> <h2>အမှတ်ပြ</h2> <p><div> အစားအုပ်အရောက်တွင် ဖြင့်ဆိပ်ဆောင်ကို သုံးစွဲပါ</p> <pre class="language-html"> <div ondrop="myFunction(event)"></div> </pre> <p class="tiy"><a target="_blank" href="/my/tiy/t.html?f=event_ondrop">ကိုယ်တိုင် ကြိုးစားကြည့်</a></p> <p>စာကြိုးတော်အောက်တွင် အခြား TIY အမျိုးမျိုးရှိပါ</p> </div> <div> <h2>အက္ခရာ</h2> <p>HTML တွင်</p> <pre class="language-html"> <<i>element</i> ondrop="<i>myScript</i>"> </pre> <p class="tiy"><a target="_blank" href="/my/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="/my/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="/my/tiy/t.html?f=event_ondrop_addeventlistener">ကိုယ်တိုင် ကြိုးစားကြည့်</a></p> <p class="note"><span>အစီရင်ခံပါ</span>ကင်စတာ အိင်တာတက် 8 သို့ အောက်မှ မပေးသေးသည် <a href="/my/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="/my/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>Level 3 Events</td> </tr> </table> </div> <div> <h2>浏览器支持</h2> <p>表中的数字注明了完全支持该事件的首个浏览器版本。</p> <table class="browser-support"> <tr> <th class="bsTh">事件</th> <th class="bsChrome">Chrome</th> <th class="bsIE">IE</th> <th class="bsFirefox">Firefox</th> <th class="bsSafari">Safari</th> <th class="bsOpera">Opera</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">Drag me!</p> <div class="droptarget">Drop here!</div> <script> /* ----------------- 在拖动目标上触发的事件 ----------------- */ document.addEventListener("dragstart", function(event) { // dataTransfer.setData()方法设置被拖拽数据的数据类型和值 event.dataTransfer.setData("Text", event.target.id); // 开始拖动 p 元素时输出一些文本 document.getElementById("demo").innerHTML = "Started to drag the p element."; // 更改可拖动元素的不透明度 event.target.style.opacity = "0.4"; }); // 拖动 p 元素时，更改输出文本的颜色 document.addEventListener("drag", function(event) { document.getElementById("demo").style.color = "red"; }); // 完成拖动 p 元素后输出一些文本并重置不透明度 document.addEventListener("dragend", function(event) { document.getElementById("demo").innerHTML = "Finished dragging the p element."; 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 = ""; } }); /* 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="/my/tiy/t.html?f=event_ondrag_all">ကိုယ်တိုင် ကြိုးစားကြည့်</a></p> </div> <div> <h2>လုံလောက်သော စာရင်း</h2> <p><a href="/my/html/html5_draganddrop.html" title="HTML5 ဖြတ်သန်းခြင်း">HTML ဝီကီ အစည်းအဝေး: HTML5 ပြောင်းလဲ</a></p> <p><a href="/my/tags/att_global_draggable.html" title="HTML draggable ဗဟုသုတ">HTML ဝီကီ ကိုးကား ချက်: HTML ပြောင်းလဲ လက်တင်</a></p> </div> <div class="btn-toref"> <a href="/my/jsref/dom_obj_event.html" title="HTML DOM အခင်းအတာ">DOM ဖြစ်ပေါ်စဉ်</a> <a href="/my/jsref/obj_dragevent.html" title="HTML DOM DragEvent">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="/my/jsref/index.html">JavaScript နှင့် HTML DOM ကိုယ်လက်အချက်အလက် စံပြ</a></h5> <h5 id="tools_example"><a href="/my/js/js_examples.html">JavaScript အမှတ်အသား</a></h5> <h5 id="tools_quiz"><a href="/my/js/js_quiz.html">JavaScript စမ်းသပ်</a></h5> <h5 id="tools_tutorial"><a href="/my/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="/my/about/index.html" title="ကိုယ်စားပြုသည် CodeW3C.com">ကိုယ်စားပြုသည် CodeW3C.com</a> <a href="/my/about/about_helping.html" title="အကူအညီ CodeW3C.com">အကူအညီ CodeW3C.com</a> <a href="/my/about/about_use.html" title="အသုံးပြုခြင်း အခါ">အသုံးပြုခြင်း အခြေခံစက္ခန်း</a> <a href="/my/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>