ကိုယ်စားပြုထားသော CodeW3C အွန်လိုင်းပြောကျင်း
HTML 系列教程
ဘာသူ စကားဝိုင်း
အန်သူ စကားဝိုင်း
编程教程
XML 系列教程
建站手册
参考手册
အစီအစဥ်
JS ကိုးကွယ်ရာဘာသ�
JS ကိုးကွယ်ရာဘာသာ (အမျိုးအစား)
JS ကိုးကွယ်ရာဘာသာ (အော်ဒိုကရောက်)
JavaScript
JS Array
JS Boolean
JS Class
JS Date
JS Error
JS Global
JS JSON
JS Map
JS Math
JS Number
JS Promise
JS RegExp
JS Set
JS String
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 Canvas
API Console
API Fetch
API Fullscreen
API Geolocation
API History
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>
<sup>
<table>
<tbody>
<td>
<tfoot>
<th>
<thead>
</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>ondragenter အခင်း</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>当可拖动元素或文本选择进入有效的放置目标时，会发生 ondragenter 事件。</p> <p>ondragenter 和 ondragleave 事件可以帮助用户了解某个可拖动元素即将进入或离开放置目标。例如，可通过在可拖动元素进入放置目标时设置背景颜色，并在元素移出目标时移除颜色来完成。</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> <pre class="language-html"> <div ondragenter="myFunction(event)"></div> </pre> <p class="tiy"><a target="_blank" href="/my/tiy/t.html?f=event_ondragenter">ကိုယ်တိုင် စစ်ဆေးကြည့်</a></p> <p>စာရင်းအောက်တွင် အသေးစိတ်အမျိုးမျိုးသော TIY အမျိုးအစားများ ရှိ</p> </div> <div> <h2>အော်ချုပ်</h2> <p>HTML တွင်：</p> <pre class="language-html"> <<i>element</i> ondragenter="<i>myScript</i>"> </pre> <p class="tiy"><a target="_blank" href="/my/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="/my/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="/my/tiy/t.html?f=event_ondragenter_addeventlistener">ကိုယ်တိုင် စစ်ဆေးကြည့်</a></p> <p class="note"><span>အကြောင်းပြချက်：</span>အင်တာနက် အစီအစဉ် ၈ သို့ အောက်မှ မပေးသင့် <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>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">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"; }); /* ----------------- ပြောင်းလဲခြင်း အကွယ်အထား အတွင်း ဖြစ်ပေါ်လာသော အခြုံအခြား အခြုံ ----------------- */ // လွှတ်တင် အရာကို ပြောင်းလဲခြင်း အကွယ်အထား အတွင်း သို့ ပြောင်းလဲခြင်း အရာကို ပြောင်းလဲခြင်း အကွယ်အထား အကွယ်အထား အရောင် ကို ပြောင်းလဲ 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="/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>