ondragstart 事件
Pangalagaan at paggamit
Ang ondragstart na kaganapan ay nangyayari kapag nagsisimula ang user ang paggalaw ng elemento o pagpipilian ng teksto.
Ang paggalaw at paglalagay ay isang napakapangkaraniwang paraan sa HTML5. Ito ay kapag kaagad kaagad mo magkatagpo ng isang bagay at idalhin ito sa iba't ibang posisyon. Upang matuto ng mas marami, basahin ang aming mga kurso tungkol sa HTML5 拖放HTML tutorial.
Komentaryo:Upang gawing maagaw ang elemento, gamit ang pangkalahatang HTML5 draggable attribute.
Mga payo:Bilang default, ang mga link at ang mga imahe ay maagaw, hindi kailangan ng draggable na attribute.
Sa iba't ibang yugto ng paggalaw at paglalagay, maraming kaganapan ang ginagamit at maaaring mangyari:
Mga kaganapan na nangyayari sa target na maagaw:
- ondragstart - Nangyayari kapag nagsisimula ang user ang paggalaw ng elemento
- ondrag - Nangyayari kapag ang elemento ay inililipat
- ondragend - Nangyayari kapag natapos ng user ang paggalaw ng elemento
Mga kaganapan na nangyayari sa target na paglalagay:
- ondragenter - Nangyayari kapag ang inililipat na elemento ay pumasok sa target na paglalagay
- ondragover - Nangyayari kapag ang inililipat na elemento ay nasa target na paglalagay
- ondragleave - Nangyayari kapag ang inililipat na elemento ay inalis sa target na paglalagay
- ondrop - Nangyayari kapag ang inililipat na elemento ay ilagay sa target na paglalagay
Halimbawa
Ipatupad ang JavaScript kapag nagsisimula ang gumagalaw ng <p> elemento ng user:
<p draggable="true" ondragstart="myFunction(event)">Drag me!</p>
May mas maraming TIY na halimbawa sa ibaba ng pahina.
Gramata
Sa HTML:
<element ondragstart="myScript">
Sa JavaScript:
object.ondragstart = function(){myScript};
Sa JavaScript, gamit ang addEventListener() na paraan:
object.addEventListener("dragstart", myScript);
Komentaryo:Internet Explorer 8 o ang mas maagang bersiyon ay hindi sumusuporta addEventListener() method.
Detalye ng teknolohiya
Bububong: | Suportado |
---|---|
Maaaring kanselahin: | Suportado |
Uri ng kaganapan: | DragEvent |
Suportadong HTML tag: | Lahat ng HTML element |
DOM bersyon: | Level 3 Events |
Suporta ng browser
Ang mga numero sa talahanayan ay nagtutukoy sa unang bersyon ng browser na ganap na sumusuporta sa kaganapan.
kaganapan | Chrome | IE | Firefox | Safari | Opera |
---|---|---|---|---|---|
ondragstart | 4.0 | 9.0 | 3.5 | 6.0 | 12.0 |
Higit pang mga halimbawa
Mga halimbawa ng lahat ng posibleng kaganapan ng pag-drag at pag-i-drop:
<p draggable="true" id="dragtarget">I-drag ko!</p> <div class="droptarget">Mag-i-drop dito!</div> <script> /* ----------------- Ang mga kaganapan na nangyari sa layunin ng pag-drag ----------------- */ document.addEventListener("dragstart", function(event) { // Ang method na dataTransfer.setData() ay nag-set ng uri ng data at ang halaga ng na-drag na data event.dataTransfer.setData("Text", event.target.id); // Pagkatapos ng pag-drag ang p element, i-output ang ilang teksto document.getElementById("demo").innerHTML = "Nagsimula ang pag-drag ng p element."; // I-change ang transparency ng draggable na element event.target.style.opacity = "0.4"; }); // Pagkatapos ng pag-drag ang p element, i-change ang kulay ng i-output na teksto document.addEventListener("drag", function(event) { document.getElementById("demo").style.color = "red"; }); // Pagkatapos na i-drag ang p element, i-output ang ilang teksto at i-reset ang transparency document.addEventListener("dragend", function(event) { document.getElementById("demo").innerHTML = "Natapos na i-drag ang 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 = ""; } }); /* On drop - 防止浏览器对数据的默认处理(默认放置时以链接打开) 重置输出文本的颜色和 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>