CodeW3C ອອນໄລຍະການ
ອອນໄລຍະການ HTML
Browser Script
Server Script
ອອນໄລຍະການ ປັດຊະຍາສາຂາ
ອອນໄລຍະການ XML
ຄູ່ມືການກໍ່ສ້າງເວັບໄຊ
ຄູ່ມືອະນຸມັດ
ຈັດສະຖານນະພາບການຮຽນ
JS Reference Manual
JS Reference Manual (Category Order)
JS Reference Manual (Alphabetical Order)
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 Object
JS Operator
JS Operator Precedence
JS Statement
JS Typed Array
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 Object
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>
</a></li> <li><a href="/lo/jsref/dom_obj_time.html" title="HTML DOM Time 对象"><time></a></li> <li><a href="/lo/jsref/dom_obj_title.html" title="HTML DOM Title 对象"><title></a></li> <li><a href="/lo/jsref/dom_obj_track.html" title="HTML DOM Track 对象"><track></a></li> <li><a href="/lo/jsref/dom_obj_u.html" title="HTML DOM Underline 对象"><u></a></li> <li><a href="/lo/jsref/dom_obj_ul.html" title="HTML DOM Ul 对象"><ul></a></li> <li><a href="/lo/jsref/dom_obj_var.html" title="HTML DOM Variable 对象"><var></a></li> <li><a href="/lo/jsref/dom_obj_video.html" title="HTML DOM 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>ondragend 事件</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>当用户完成拖动元素或文本选择时，会发生 ondragend 事件。</p> <p>拖放是 HTML5 中非常常见的功能。就是当您“抓取”一个对象并将其拖动到不同位置时。如需学习更多知识，请阅读我们关于 <a href="/lo/html/html5_draganddrop.html" title="HTML5 拖放">HTML5 拖放</a>的 HTML 教程。</p> <p class="note"><span>ຄວາມເຫັນ:</span>如需使元素可拖动，请使用全局 <a href="/lo/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="/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>ຖ້າຜູ້ນຳໃຊ້ສຳເລັດການຖົກຖຽງ <p> ສະຖານທີ່ການດຳເນີນ JavaScript:</p> <pre class="language-html"> <p draggable="true" ondragend="myFunction(event)">Drag me!</p> </pre> <p class="tiy"><a target="_blank" href="/lo/tiy/t.html?f=event_ondragstart">ຕອບຕາມເອງ</a></p> <p>ບ່ອນທີ່ມີຫຼາຍຄວາມຄິດທີ່ຈະພະຍາຍາມຕີຢູ່ບ່ອນດັ່ງກ່າວ.</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="/lo/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="/lo/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="/lo/tiy/t.html?f=event_ondragstart_addeventlistener">ຕອບຕາມເອງ</a></p> <p class="note"><span>ຄວາມເຫັນ:</span>Internet Explorer 8 ຕໍ່າກວ່າ ບໍ່ສາມາດສະໜັບສະໜູນ <a href="/lo/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="/lo/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">ຖົກຂ້ອຍ!</p> <div class="droptarget">ຍົກມານັ້ນ!</div> <script> /* ----------------- ເຫດການທີ່ຖືກຈຸດຢູ່ຂອງປະກອບຖົກ ----------------- */ document.addEventListener("dragstart", function(event) { // setData() ລະບົບທີ່ປ່ຽນມາຂອງ setData() ການປ່ຽນມາຂອງຂໍ້ຄວາມທີ່ຖົກ event.dataTransfer.setData("Text", event.target.id); // ອອກມາຂໍ້ຄວາມໃນຂະນະເລີ່ມຖົກ p 元ປະກອບ document.getElementById("demo").innerHTML = "ເລີ່ມຖົກ p 元ປະກອບ."; // ປ່ຽນຄວາມສະຫຼາດຂອງປະກອບທີ່ສາມາດຖົກ 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 = "ສຳເລັດການຖົກຂອງປະກອບ p."; 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 drag-and-drop</a></p> <p><a href="/lo/tags/att_global_draggable.html" title="HTML draggable 属性">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>