CodeW3C အွန်လိုင်း ပရိုဂရမ်
HTML အပိုင်းအစတ် ပရိုဂရမ်
ဘတ်ကဲ့ အခြေခံ
ပရိုဂရမ် အခြေခံ
ပရိုဂရမ် ပရိုဂရမ်
XML အပိုင်းအစတ် ပရိုဂရမ်
ဝန်ဆောင်မှု ပရိုဂရမ်
ကိုယ်စားပြု ပရိုဂရမ်
အစီအစဥ်ရှင်
JS ဂရိယူးမားမှတ်တမ်း
JS ဂရိယူးမားမှတ်တမ်း(အမျိုးအစားအောက်)
JS ဂရိယူးမားမှတ်တမ်း(အစားအောက်အောက်အောက်)
JavaScript
JS Array
JS Boolean
JS Class
JS Date
JS အမှား
JS ကွန်ပျူတာ
JS JSON
JS Map
JS Math
JS စကား
JS Promise
JS RegExp
JS Set
JS စကား
JS အပုံစံ
JS အကျယ်အဝန်း
JS အကျယ်အဝန်း အဆင့်
JS ဖော်ပြ
JS အမျိုးအစားအုပ်
Window
Window အပေါင်းစု
Window Console
Window History
Window Location
Window Navigator
Window Screen
HTML DOM
HTML Document
HTML Element
HTML Attribute
HTML Event
HTML Event အပုံစံ
HTML Collection
HTML NodeList
HTML DOMTokenList
HTML အော်ဒါ
Web API
API ကွန်ပျူတာလက်
API ကွန်ပျူတာ
API ဆွဲဝင်
API ပြင်းကြီး
API စစ်ဆေးစဉ်
API သမိုင်း
API မီဒီယာကိုင်တန်း
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>
</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>ondragend ဖြစ်ပေါ်ခြင်း</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>当用户完成拖动元素或文本选择时，会发生 ondragend 事件。</p> <p>拖放是 HTML5 中非常常见的功能。就是当您“抓取”一个对象并将其拖动到不同位置时。如需学习更多知识，请阅读我们关于 <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>အခြား အခြေခံ သဘောတူ အရ လိင်းခ်ား နှင့် ယဉ်ကျေးမှု သုံးစွဲကြပါတယ် နှင့် draggable အခြေခံ သဘောတူ မပေးဆပ်ရသည်</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>အသုံးပြုသူ သူတို့ရဲ့ <p> အချက်အလက် ပြောင်းလဲမှုကို ပြုလုပ်ခဲ့ပြီးနောက် JavaScript ကို အခြေခံအုပ်ချုပ်ပါ</p> <pre class="language-html"> <p draggable="true" ondragend="myFunction(event)">Drag me!</p> </pre> <p class="tiy"><a target="_blank" href="/my/tiy/t.html?f=event_ondragstart">ကိုယ်တိုင် ကျင်းပမည်</a></p> <p>ပြင်ဘက်တွင် အခြား TIY အကျိုးသတ္တုများ ရှိတယ်</p> </div> <div> <h2>အော်ဒါ</h2> <p>HTML တွင်:</p> <pre class="language-html"> <<i>element</i> ondragend="<i>myScript</i>"> </pre> <p class="tiy"><a target="_blank" href="/my/tiy/t.html?f=event_ondragstart_html">ကိုယ်တိုင် ကျင်းပမည်</a></p> <p>JavaScript တွင်:</p> <pre class="language-js"> <i>object</i>.ondragend = function(){<i>myScript</i>}; </pre> <p class="tiy"><a target="_blank" href="/my/tiy/t.html?f=event_ondragstart_dom">ကိုယ်တိုင် ကျင်းပမည်</a></p> <p>JavaScript တွင်，addEventListener() စက်သုံးပါ:</p> <pre class="language-js"> <i>object</i>.addEventListener("dragend", <i>myScript</i>); </pre> <p class="tiy"><a target="_blank" href="/my/tiy/t.html?f=event_ondragstart_addeventlistener">ကိုယ်တိုင် ကျင်းပမည်</a></p> <p class="note"><span>အသိပ်မှု:</span>Internet Explorer 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>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">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 အရာ လွှတ်ပြထားသော droptarget ကို ဝင်ရောက်ခြင်း ဖြစ်ခဲ့ လျှင် အကြီးအကျယ် အဝေးအဝေး အသတ်မတော် 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 မှ ထွက်ခွာခြင်း ဖြစ်ခဲ့ လျှင် အကြီးအကျယ် အဝေးအဝေး အသတ်မတော် 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="/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> <!-- maincontent end --> <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> <!-- wrapper end --> <script src="/myjs/tongji.js"></script> </body> </html>