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 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>
</a></li> <li><a href="/lo/jsref/dom_obj_time.html" title="ສັນຍາວັນໂທມໂດມີດໍມິສ ທີ່ເວລາ"><time></a></li> <li><a href="/lo/jsref/dom_obj_title.html" title="ສັນຍາວັນໂທມໂດມີດໍມິສ ທີ່ຫົວ"><title></a></li> <li><a href="/lo/jsref/dom_obj_track.html" title="ສັນຍາວັນໂທມໂດມີດໍມິສ ທີ່ກຳລັງ"><track></a></li> <li><a href="/lo/jsref/dom_obj_u.html" title="ສັນຍາວັນໂທມໂດມີດໍມິສ ທີ່ຫົວ"><u></a></li> <li><a href="/lo/jsref/dom_obj_ul.html" title="ສັນຍາວັນໂທມໂດມີດໍມິສ ທີ່ສະເພາະ"><ul></a></li> <li><a href="/lo/jsref/dom_obj_var.html" title="ສັນຍາວັນໂທມໂດມີດໍມິສ ທີ່ປ່ຽນ"><var></a></li> <li><a href="/lo/jsref/dom_obj_video.html" title="ສັນຍາວັນໂທມໂດມີດໍມິສ ທີ່ຫົວ"><video></a></li> </ul> <h2>其他参考手册</h2> <ul> <li><a href="/lo/jsref/obj_cssstyledeclaration.html" title="ສັນຍາວັນໂທມໂດມີດໍມິສ ຊັບສັນຍາວັນໂທມໂດມີດໍມິສ">CSSStyleDeclaration</a></li> <li><a href="/lo/jsref/jsref_type_conversion.html" title="ການປ່ຽນຮູບແບບເລື່ອງເຈັສຊາວ">JS 类型转换</a></li> </ul> </div> <div><h3><center> 选修课 </center><h3> <h2>课程推荐：</h2> <ul> <li><a href="/lo/howto/index.html" title="ສະຖານນິວທີການຄອບສະຫຼອງທີ່ວັນຄອບສະຫຼອງຄວາມຄິວເຄີມຄອມພິວມ">ສະຖານນິວທີການຄອບສະຫຼອງທີ່ວັນຄອບສະຫຼອງຄວາມຄິວເຄີມຄອມພິວມ</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="/lo/jsref/dom_obj_event.html" title="ອົງປະກອບ HTML DOM Event">DOM 事件</a> <a href="/lo/jsref/obj_dragevent.html" title="ສັນຍາວັນໂທມໂດມີດໍມິສ ທີ່ດາວເຂົ້າ">DragEvent</a> </div> <div> <h2>定义和用法</h2> <p>当可拖动元素或文本选择进入有效的放置目标时，会发生 ondragenter 事件。</p> <p>ondragenter ແລະ ondragleave 事件ສາມາດຊ່ວຍຜູ້ນຳໃຊ້ຮູ້ວ່າປະກອບສິ່ງທີ່ຖອຍຈະເຂົ້າໄປຫຼິ້ນຫຼືອອກໄປຈາກເປົ້າຫຼິ້ນ. ເປັນຕົວຢ່າງທີ່ຈະປ່ຽນສີທີ່ຫຼິ້ນໃນປະກອບສິ່ງທີ່ຖອຍເຂົ້າໄປໃນເປົ້າຫຼິ້ນແລະຫຼຸດສີຫຼິ້ນອອກໄປຈາກເປົ້າຫຼິ້ນ.</p> <p>ການຖອຍໄດ້ແມ່ນປະສົມກະສັບທີ່ຫຼາຍທີ່ຖືກນໍາໃຊ້ໃນ HTML5. ນັ້ນແມ່ນຖ້າເຈົ້າ "ກິດ" ໜຶ່ງເປົ້າຫຼິ້ນແລະຖອຍມາໃນທີ່ອື່ນ. ຖ້າເຈົ້າຕ້ອງຮຽນຫຼາຍກວ່ານັ້ນຈະອ່ານພວກເຮົາກ່ຽວກັບ <a href="/lo/html/html5_draganddrop.html" title="ສັນຍາວັນໂທມຫ້າງຂະໜາດຫົວ">ສັນຍາວັນໂທມຫ້າງຂະໜາດຫົວ</a>HTML Tutorial.</p> <p class="note"><span>ຄວາມເຫັນ:</span>ເພື່ອເຮັດໃຫ້ປະກອບສິ່ງສາມາດຖອຍໄດ້ຫຼາຍກວ່ານັ້ນຈະຕ້ອງນຳໃຊ້ global <a href="/lo/tags/att_global_draggable.html" title="ສັນຍາວັນໂທມຫ້າງຂະໜາດຫົວ">ປະເພດ 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> </div> <div> <h2>ຄວາມຄິດທີ່ຕິດຕາມ</h2> <p>ດຳເນີນ JavaScript ເມື່ອປະກອບສິ່ງທີ່ສາມາດຖອຍໄດ້ບັນຈຸເຂົ້າໄປໃນເປົ້າຫຼິ້ນ</p> <pre class="language-html"> <div ondragenter="myFunction(event)"></div> </pre> <p class="tiy"><a target="_blank" href="/lo/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="/lo/tiy/t.html?f=event_ondragenter_html">ທ້າທາຍຕົວເອງ</a></p> <p>ໃນ JavaScript:</p> <pre class="language-js"> <i>object</i>.ondragenter = function(){<i>myScript</i>}; </pre> <p class="tiy"><a target="_blank" href="/lo/tiy/t.html?f=event_ondragenter_dom">ທ້າທາຍຕົວເອງ</a></p> <p>ໃນ JavaScript，ນຳໃຊ້ກົນລະບົບ addEventListener()</p> <pre class="language-js"> <i>object</i>.addEventListener("dragenter", <i>myScript</i>); </pre> <p class="tiy"><a target="_blank" href="/lo/tiy/t.html?f=event_ondragenter_addeventlistener">ທ້າທາຍຕົວເອງ</a></p> <p class="note"><span>ຄວາມເຫັນ:</span>ບໍ່ສາມາດສະໜັບສະໜູນ Internet Explorer 8 ຫຼືຫຼາຍກວ່ານັ້ນ <a href="/lo/jsref/met_element_addeventlistener.html" title="ການໃຫ້ການຂັດສິນລູກອາກາດທີ່ addEventListener()">addEventListener() method</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="/lo/jsref/obj_dragevent.html" title="ສັນຍາວັນໂທມໂດມີດໍມິສ ທີ່ດາວເຂົ້າ">DragEvent</a></td> </tr> <tr> <th>ທີ່ສາມາດສະໜັບສະໜູນບັນດາບັນດາສີ່ອາກາດ</th> <td>ທຸກສິ່ງທີ່ສາມາດສະແດງສານ</td> </tr> <tr> <th style="width: 25%;">DOM Version:</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">ຖົກຖຽງຂ້ອຍ!</p> <div class="droptarget">ປະຕິບັດຢູ່ບັນດາສະຖານທີ່ນີ້!</div> <script> /* ----------------- ການຈູດກະຕຸ້ນທີ່ກະຕຸ້ນຂອງບັນດາບາງສະຖານທີ່ຖົກຖຽງ ----------------- */ document.addEventListener("dragstart", function(event) { // dataTransfer.setData()ວິທີການການກະກຽມຂໍ້ມູນທີ່ຖົກຖຽງແລະຂັ້ນຕອນ event.dataTransfer.setData("Text", event.target.id); // ສຳເລັດການຖົກຖຽງບັນດາຄວາມເມື່ອເລີ່ມຖົກຖຽງ p element document.getElementById("demo").innerHTML = "ເລີ່ມຖົກຖຽງ p 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="ສັນຍາວັນໂທມຫ້າງຂະໜາດຫົວ">HTML ການສອນ: HTML5 drag and drop</a></p> <p><a href="/lo/tags/att_global_draggable.html" title="ສັນຍາວັນໂທມຫ້າງຂະໜາດຫົວ">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="ສັນຍາວັນໂທມໂດມີດໍມິສ ທີ່ດາວເຂົ້າ">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>