ເຫດການ ondrag

Syllabus

JS Reference Manual

JavaScript

Window

HTML DOM

Web API

HTML ໂອບຄູບ

</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="ກະກຸນບັນດາວິທະຍາສາດເວັບໄຊ 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>ເຫດການ ondrag</h1> <div class="btn-toref"> <a href="/lo/jsref/dom_obj_event.html" title="HTML DOM 事件">DOM 事件</a> <a href="/lo/jsref/obj_dragevent.html" title="ໂອບເອັມໄອລີ້ ດາວນິວເອັມເອກິກ">DragEvent</a> </div> <div> <h2>定义和用法</h2> <p>ondrag 事件在元素或文本选择被拖动时发生。</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="ລັກສະນະ draggable HTML">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> <p class="note"><span>ຄວາມເຫັນ:</span>ການດຳເນີນ ອາກາດ ondrag ໃນເວລາ 350 ມານິວຊອງ</p> </div> <div> <h2>ຕົວຢ່າງ</h2> <p>ການດຳເນີນ JavaScript ເມື່ອຖືກຖານ <p> ສະແດງ</p> <pre class="language-html"> <p draggable="true" ondrag="myFunction(event)">Drag me!</p> </pre> <p class="tiy"><a target="_blank" href="/lo/tiy/t.html?f=event_ondrag">ທ່ານຈະທົດລອງດຽວວຽນ</a></p> <p>ບ່ອນທີ່ຢູ່ລຸ່ມບັນຫາທີ່ຈະພິຈາລະນາ</p> </div> <div> <h2>ວິນຍານ</h2> <p>ໃນ HTML:</p> <pre class="language-html"> <<i>element</i> ondrag="<i>myScript</i>"> </pre> <p class="tiy"><a target="_blank" href="/lo/tiy/t.html?f=event_ondrag_html">ທ່ານຈະທົດລອງດຽວວຽນ</a></p> <p>ໃນ JavaScript:</p> <pre class="language-js"> <i>object</i>.ondrag = function(){<i>myScript</i>}; </pre> <p class="tiy"><a target="_blank" href="/lo/tiy/t.html?f=event_ondrag_dom">ທ່ານຈະທົດລອງດຽວວຽນ</a></p> <p>ໃນ JavaScript，ໃຊ້ພາສາສັນຍາບັນ addEventListener()</p> <pre class="language-js"> <i>object</i>.addEventListener("drag", <i>myScript</i>); </pre> <p class="tiy"><a target="_blank" href="/lo/tiy/t.html?f=event_ondrag_addeventlistener">ທ່ານຈະທົດລອງດຽວວຽນ</a></p> <p class="note"><span>ຄວາມເຫັນ:</span>ອິນເຕີເນັດ ອີເລັສຊອດ 8 ຫຼືຫຼາຍກວ່ານັ້ນບໍ່ສາມາດສະໜັບສະໜູນ <a href="/lo/jsref/met_element_addeventlistener.html" title="ການໃຫ້ຄະນະກຳມະການທີ່ໄດ້ຮັບຜູ້ຄົນໃນໂອບເອັມໄອລີ້">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="ໂອບເອັມໄອລີ້ ດາວນິວເອັມເອກິກ">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>ondrag</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>HTML ອົງການການສອນ<a href="/lo/html/html5_draganddrop.html" title="ການຖອນຖົກເວັບໄຊ HTML5">ການຖອນຖົກເວັບໄຊ HTML5</a></p> <p>HTML 参考手册：<a href="/lo/tags/att_global_draggable.html" title="ລັກສະນະ draggable HTML">ລັກສະນະ draggable HTML</a></p> </div> <div class="btn-toref"> <a href="/lo/jsref/dom_obj_event.html" title="HTML DOM 事件">DOM 事件</a> <a href="/lo/jsref/obj_dragevent.html" title="ໂອບເອັມໄອລີ້ ດາວນິວເອັມເອກິກ">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="/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>  <script src="/myjs/tongji.js"></script> </body> </html>