ondragstart ဖြစ်ပေါ်

Schedule

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>ondragstart ဖြစ်ပေါ်</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>ondragstart 事件在用户开始拖动元素或文本选择时发生。</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>ပုံမှန်အားဖြင့် လွှတ်တမ်း နှင့် ယဉ်ကျေးမှု ဖြင့် ဖြင့် ဖြင့် ဖြင့် ဖြင့် အသုံးပြုခြင်း မပြုရ</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> အစိတ်အလိုက် ဖြင့် ဖယ်ရှားသွားသောအခါ ဂျပန်ဘာသာ အသုံးပြုကြည်း</p> <pre class="language-html"> <p draggable="true" ondragstart="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> ondragstart="<i>myScript</i>"> </pre> <p class="tiy"><a target="_blank" href="/my/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="/my/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="/my/tiy/t.html?f=event_ondragstart_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>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">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 အရာ လွှတ်တင် ဖို့ အခါ အဆောင်အယောင် အဆောင်အယောင် အရောင် ကို ပြန်လည်ကျပ်နှိပ်ခြင်း 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>  <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>