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 Object
  • 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 Style

Web API

  • API Canvas
  • API Console
  • API Fetch
  • API Fullscreen
  • API Geolocation
  • API History
  • API MediaQueryList
  • API Storage
  • API Validation
  • API Web

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>
  • <summary>
  • <sup>
  • <table>
  • <tbody>
  • <td>
  • <tfoot>
  • <th>
  • <thead>
  • <tr>
  • <textarea>
  • <time>
  • </a></li> <li><a href="/lo/jsref/dom_obj_track.html" title="ໂອບເອັມໄອ້ມາສະໂຕແບບ Track"><track></a></li> <li><a href="/lo/jsref/dom_obj_u.html" title="ໂອບເອັມໄອ້ມາສະໂຕແບບ Underline"><u></a></li> <li><a href="/lo/jsref/dom_obj_ul.html" title="ໂອບເອັມໄອ້ມາສະໂຕແບບ Ul"><ul></a></li> <li><a href="/lo/jsref/dom_obj_var.html" title="ໂອບເອັມໄອ້ມາສະໂຕແບບ Variable"><var></a></li> <li><a href="/lo/jsref/dom_obj_video.html" title="ໂອບເອັມໄອ້ມາສະໂຕແບບ Video"><video></a></li> </ul> <h2>其他参考手册</h2> <ul> <li><a href="/lo/jsref/obj_cssstyledeclaration.html" title="ໂອບເອັມໄອ້ມາສະໂຕແບບ CSSStyleDeclaration">CSSStyleDeclaration</a></li> <li><a href="/lo/jsref/jsref_type_conversion.html" title="ການປ່ຽນປະເພດ JavaScript">JS 类型转换</a></li> </ul> </div> <div><h3><center> 选修课 </center><h3> <h2>课程推荐：</h2> <ul> <li><a href="/lo/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>ເຫດການ ondragover</h1> <div class="btn-toref"> <a href="/lo/jsref/dom_obj_event.html" title="HTML DOM Event">ເອັມໄອ້ມາສະໂຕແບບ DOM ເຫດການ</a> <a href="/lo/jsref/obj_dragevent.html" title="ເອັມໄອ້ມາສະໂຕແບບ HTML DOM DragEvent">ເອັມໄອ້ມາສະໂຕແບບ DragEvent</a> </div> <div> <h2>定义和用法</h2> <p>当可拖动元素或文本选择被拖动到有效放置目标上时，会发生 ondragover 事件。</p> <p>ໂດຍກົດໄດ້ທີ່ບໍ່ສາມາດຖອນຂໍ້ມູນ/ສິ່ງອອກຈາກສິ່ງອື່ນ. ເພື່ອອະນຸຍາດການຈຸດຍົກຂວັນ，ພວກເຮົາຕ້ອງການຢຸດການຈັດການຈົບຖານສະຫຼາກຂອງສິ່ງ. ນັ້ນແມ່ນການເຮັດດ້ວຍການເອິ້ນ ການຈັດການຈົບຖານສະຫຼາກຂອງພວກມາດັບສັບ ondragover event.preventDefault()</p> <p>ພວກມັນແມ່ນພາກສ່ວນທີ່ຄົງທີ່ຂອງ HTML5. ມັນແມ່ນການ "ຖົ່ມ" ໜຶ່ງສິ່ງ ແລະ ຖົ່ມຫາຈຸດອື່ນ. ເພື່ອຮຽນຮູ້ຫຼາຍກວ່າເຂົານັ້ນ，ການອ່ານອິດສະຫຼະຂອງພວກເຮົາ <a href="/lo/html/html5_draganddrop.html" title="ການຖອນຖານ HTML5">ການຖອນຖານ HTML5</a>HTML</p> <p class="note"><span>ບັນດາຄວາມເວົ້າ</span>ເພື່ອເຮັດໃຫ້ສິ່ງສາມາດຖົ່ມຫາຈຸດຍົກຂວັນໄດ້，ຂໍ້ສະເໜີໃຫ້ນຳໃຊ້ HTML <a href="/lo/tags/att_global_draggable.html" title="ປະສົມປະສານ draggable HTML">ທະບຽນ draggable HTML5</a>.</p> <p class="tip"><span>ຄຳແນະນຳ:</span>ໂດຍກົດໄດ້ທີ່ຍັງບໍ່ມີທະບຽນ draggable 属性，ມັນຈະສາມາດຖົ່ມສິ່ງໄດ້</p> <p>ໃນຂະນະທີ່ມີການຖົ່ມຫາຈຸດຍົກຂວັນຈະມີຫຼາຍພວກມາດັບສັບທີ່ຈະຖືກໃຊ້ແລະອາດເກີດຂື້ນ</p> <p>ພວກມາດັບສັບທີ່ຖືກກະຕຸ້ນໃນເປັນເປົ້າເຫດສາຍສານຖົ່ມຫາ:</p> <ul> <li><a href="/lo/jsref/event_ondragstart.html" title="ເຫດການ ondragstart">ondragstart</a> - ຈະເກີດຂື້ນເມື່ອຜູ້ນຳໃຊ້ເລີ່ມຖົ່ມສິ່ງ</li> <li><a href="/lo/jsref/event_ondrag.html" title="ເຫດການ ondrag">ondrag</a> - ຈະເກີດຂື້ນເມື່ອສິ່ງຖົ່ມຫາຈຸດຍົກຂວັນ</li> <li><a href="/lo/jsref/event_ondragend.html" title="ເຫດການ ondragend">ondragend</a> - ຈະເກີດຂື້ນເມື່ອຜູ້ນຳໃຊ້ສຳເລັດການຖົ່ມສິ່ງ</li> </ul> <p>ພວກມາດັບສັບທີ່ຖືກກະຕຸ້ນໃນຈຸດຍົກຂວັນ:</p> <ul> <li><a href="/lo/jsref/event_ondragenter.html" title="ເຫດການ ondragenter">ondragenter</a> - ຈະເກີດຂື້ນເມື່ອສິ່ງຖົ່ມເຂົ້າໃນຈຸດຍົກຂວັນ</li> <li><a href="/lo/jsref/event_ondragover.html" title="ເຫດການ ondragover">ondragover</a> - ຈະເກີດຂື້ນເມື່ອມີສິ່ງຖົ່ມຫາຈຸດຍົກຂວັນ</li> <li><a href="/lo/jsref/event_ondragleave.html" title="ເຫດການ ondragleave">ondragleave</a> - ຈະເກີດຂື້ນເມື່ອມີການຖົ່ມສິ່ງອອກຈາກຈຸດຍົກຂວັນ</li> <li><a href="/lo/jsref/event_ondrop.html" title="ເຫດການ ondrop">ondrop</a> - ຈະເກີດຂື້ນເມື່ອມີການຖົ່ມສິ່ງຫາຈຸດຍົກຂວັນ</li> </ul> <p class="note"><span>ບັນດາຄວາມເວົ້າ</span>ໃນຂະນະທີ່ການຖົ່ມສິ່ງໃນຫຼັກຈຸດປະສົມກັນ，ພວກມາດັບສັບ ondragover ຈະຖືກກະຕຸ້ນບໍ່ລວມ 350 ວິນາທີ</p> </div> <div> <h2>ຄວາມນຳໃຊ້</h2> <p>ດຳເນີນ JavaScript ເມື່ອມີການຖົ່ມສິ່ງໄປຫາຈຸດຍົກຂວັນ</p> <pre class="language-html"> <div ondragover="myFunction(event)"></div> </pre> <p class="tiy"><a target="_blank" href="/lo/tiy/t.html?f=event_ondragover">ທ້າທາຍຕົວເອງ</a></p> <p>ມີຫຼາຍຄວາມເວົ້າ TIY ຢູ່ດ້ານລຸ່ມຂອງເວັບໄຊ</p> </div> <div> <h2>ຂອບເຂລະຄັວນ</h2> <p>ໃນ HTML:</p> <pre class="language-html"> <<i>element</i> ondragover="<i>myScript</i>"> </pre> <p class="tiy"><a target="_blank" href="/lo/tiy/t.html?f=event_ondragover_html">ທ້າທາຍຕົວເອງ</a></p> <p>ໃນ JavaScript:</p> <pre class="language-js"> <i>object</i>.ondragover = function(){<i>myScript</i>}; </pre> <p class="tiy"><a target="_blank" href="/lo/tiy/t.html?f=event_ondragover_dom">ທ້າທາຍຕົວເອງ</a></p> <p>ໃນ JavaScript，ນຳໃຊ້ພວກມາດັບສັບ addEventListener()</p> <pre class="language-js"> <i>object</i>.addEventListener("dragover", <i>myScript</i>); </pre> <p class="tiy"><a target="_blank" href="/lo/tiy/t.html?f=event_ondragover_addeventlistener">ທ້າທາຍຕົວເອງ</a></p> <p class="note"><span>ບັນດາຄວາມເວົ້າ</span>ບໍ່ສາມາດສະໜັບສະໜູນ Internet Explorer 8 ຫຼືອັນພື້ນຖານ <a href="/lo/jsref/met_element_addeventlistener.html" title="ພາສາ addEventListener() HTML DOM">addEventListener() method</a>.</p> </div> <div> <h2>Technical Details</h2> <table class="definition-usage"> <tr> <th>Bubble:</th> <td>Supported</td> </tr> <tr> <th>Cancelable:</th> <td>Supported</td> </tr> <tr> <th>Event type:</th> <td><a href="/lo/jsref/obj_dragevent.html" title="ເອັມໄອ້ມາສະໂຕແບບ HTML DOM DragEvent">ເອັມໄອ້ມາສະໂຕແບບ DragEvent</a></td> </tr> <tr> <th>Supported HTML tags:</th> <td>All HTML elements</td> </tr> <tr> <th style="width: 25%;">DOM Version:</th> <td>Level 3 Events</td> </tr> </table> </div> <div> <h2>Browser Support</h2> <p>ເຂດຈຳນວນຂອງ browser ທີ່ເປັນໄປຕາມ event</p> <table class="browser-support"> <tr> <th class="bsTh">Event</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>ondragover</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>ການສະແດງຂອງ event ທີ່ສາມາດຖອນຫຼາຍບ່ອນ</p> <pre class="language-html"> <p draggable="true" id="dragtarget">ຖອນຂ້ອຍ!</p> <div class="droptarget">ຍິນຍານບຸກບາດນີ້!</div> <script> /* ----------------- Event ທີ່ຖືກຈຸດຢູ່ໃນເປົ້າຖອນ ----------------- */ document.addEventListener("dragstart", function(event) { // dataTransfer.setData() method ກຳນົດຊີ້ວິທະຍາຂອງ data ທີ່ຖອນ event.dataTransfer.setData("Text", event.target.id); // ທີ່ເລີ່ມຖອນ p element ທີ່ອອກມາຄຳຂັດ document.getElementById("demo").innerHTML = "ເລີ່ມຖອນ p element."; // ປ່ຽນຄວາມກະຈັງຂອງບັນດາ element ທີ່ສາມາດຖອນ event.target.style.opacity = "0.4"; }); // ທີ່ຖອນ p element ທີ່ອອກມາປ່ຽນສີຂອງຄຳຂັດ document.addEventListener("drag", function(event) { document.getElementById("demo").style.color = "red"; }); // ສຳເລັດການຖອນ p element ທີ່ອອກມາຄຳຂັດແລະປ່ຽນຄວາມກະຈັງ document.addEventListener("dragend", function(event) { document.getElementById("demo").innerHTML = "ສຳເລັດການຖອນ p element."; event.target.style.opacity = "1"; }); /* ----------------- ການສະເຫລີມທີ່ຖືກສະເໜີໃນບ່ອນຕິດຕັ້ງ ----------------- */ // ຖ້າ p ປະກອບສ່ວນທີ່ສາມາດຖອນຈະເຂົ້າໃນ droptarget ປ່ຽນຮູບແບບກະເບື້ອງ DIV 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 ປ່ຽນຮູບແບບກະເບື້ອງ DIV 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="/lo/tiy/t.html?f=event_ondrag_all">ທ້າທາຍຕົວເອງ</a></p> </div> <div> <h2>ບັນດາຫົວຂໍ້ທີ່ກ່ຽວຂ້ອງ</h2> <p><a href="/lo/html/html5_draganddrop.html" title="ການຖອນຖານ HTML5">HTML ການສອນ: HTML5 ຖອນເອົາ</a></p> <p><a href="/lo/tags/att_global_draggable.html" title="ປະສົມປະສານ draggable HTML">HTML ອະນຸມັດ: HTML draggable ຄວາມ</a></p> </div> <div class="btn-toref"> <a href="/lo/jsref/dom_obj_event.html" title="HTML DOM Event">ເອັມໄອ້ມາສະໂຕແບບ DOM ເຫດການ</a> <a href="/lo/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="/lo/jsref/index.html">ຄູ່ມູນອະທິບາຍ JavaScript ແລະ HTML DOM</a></h5> <h5 id="tools_example"><a href="/lo/js/js_examples.html">ການປະກາດ JavaScript</a></h5> <h5 id="tools_quiz"><a href="/lo/js/js_quiz.html">ການສອບເສັງ JavaScript</a></h5> <h5 id="tools_tutorial"><a href="/lo/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="/lo/about/index.html" title="ກ່ຽວກັບ CodeW3C.com">ກ່ຽວກັບ CodeW3C.com</a> <a href="/lo/about/about_helping.html" title="ຊ່ວຍເຫຼືອ CodeW3C.com">ຊ່ວຍເຫຼືອ CodeW3C.com</a> <a href="/lo/about/about_use.html" title="ກ່ຽວກັບການນໍາໃຊ້">ຂໍ້ກໍານົດການນໍາໃຊ້</a> <a href="/lo/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>