ondrag Event
Paglilinaw at Paggamit
Ang pangyayari ng ondrag ay nagaganap kapag ang elemento o ang pagpili ng teksto ay idrag.
Ang pagddrag-drop ay isang napakapangkaraniwang pagamit sa HTML5. Ito ay kapag ka "hinihigop" ang isang bagay at idrag ito sa iba't ibang posisyon. Upang matuto ng mas marami, basahin ang aming mga kurso sa HTML5 PagpalitHTML tutorial.
Komentaryo:Upang maging puwedeng idrag ang elemento, gamit ang global HTML5 draggable na attribute。
Mga tagubilin:Bilang default, ang mga link at ang mga imahe ay puwedeng idrag, hindi kailangan ng draggable na attribute.
May maraming pangyayari na ginagamit sa iba't ibang yugto ng pagddrag-drop, at maaaring mangyari:
Ang mga pangyayari na nagpapasadya sa layunin ng idrag (source element):
- ondragstart - Nang ang user ay nagsimula ng idrag ang elemento
- ondrag - Nang ang elemento ay idrag
- ondragend - Nang ang user ay tapos na idrag ang elemento
Ang mga pangyayari na nagpapasadya sa layunin ng paglalagay:
- ondragenter - Nang ang inidrag na elemento ay pumasok sa layunin ng paglalagay
- ondragover - Nang ang inidrag na elemento ay nasa layunin ng paglalagay
- ondragleave - Nang ang inidrag na elemento ay iwanan ang layunin ng paglalagay
- ondrop - Nang ang inidrag na elemento ay ilagay sa layunin ng paglalagay
Komentaryo:Kapag inidrag ang elemento, ang ondrag na pangyayari ay nagpapasadya bawat 350 milisegundo.
Mga halimbawa
Ang JavaScript ay isinasagawa kapag inidrag ang <p> elemento:
<p draggable="true" ondrag="myFunction(event)">Drag me!</p>
May mas maraming TIY na halimbawa sa ibaba ng pahina.
Gramata
Sa HTML:
<element ondrag="myScript">
Sa JavaScript:
object.ondrag = function(){myScript};
Sa JavaScript, gamit ang addEventListener() na paraan:
object.addEventListener("drag", myScript);
Komentaryo:Internet Explorer 8 o mas maagang bersiyon ay hindi sumusuporta addEventListener() method。
Detalye ng teknolohiya
| Buong-buo ang pagpasok: | Suportado |
|---|---|
| Maaaring kanselahin: | Suportado |
| Uri ng kaganapan: | DragEvent |
| Suportadong HTML tag: | Lahat ng HTML element |
| DOM bersyon: | Level 3 Events |
Suporta ng Browser
Ang numero sa talahanayan ay naglalarawan ng unang bersyon ng browser na suportado ang kaganapan
| kaganapan | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| ondrag | 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 datos at ang halaga ng inilalagay
event.dataTransfer.setData("Text", event.target.id);
// I-output ang teksto kapag nagsimula ang pag-drag ng p element
document.getElementById("demo").innerHTML = "Nagsimula ang pag-drag ng p element.";
// I-change ang opacity ng maaaring i-drag na elemento
event.target.style.opacity = "0.4";
});
// Pag i-drag ang p element, i-change ang kulay ng teksto sa output
document.addEventListener("drag", function(event) {
document.getElementById("demo").style.color = "red";
});
// Nagtapos na i-drag ang p element, i-output ang teksto at i-reset ang opacity
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 = "";
}
});
/* 在放下时 - 防止浏览器对数据的默认处理（默认放置时以链接打开）
重置输出文本的颜色和 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>
