ondrop Event
Pagsasakop at paggamit
Nangyayari ang kaganapan na ondrop kapag ang inidrag na elemento o ang piniling teksto ay ilagay sa wastong layunin na ilagay.
Ang pagdrop ay isang napakakaraniwang pagamit sa HTML5. Ito ay kapag kaagad mo ay nagpupuno ng isang bagay at idrag ito sa iba't ibang posisyon. Upang matuto ng mas marami, basahin ang aming mga artikulo tungkol sa HTML5 Drag and DropHTML tutorial.
Komentaryo:Upang gumawa ng elemento na maaaring tanggapin ang pagdrop, gamit ang pangkalahatang HTML5 draggable na atributo。
Mga payo:Sa normal na kalagayan, ang mga link at ang mga imahe ay maaari tanggapin ang pagdrop, hindi kailangan ng atributo na draggable.
May maraming kaganapan na ginagamit sa iba't ibang yugto ng operasyon ng pagdrop at maaring mangyari:
Mga kaganapan na nangyayari sa layunin na idrag (source element):
- ondragstart - Nangyayari kapag nagsimula ang user ang idrag ng elemento
- ondrag - Nangyayari kapag ang elemento ay idrag
- ondragend - Nangyayari kapag natapos ng user ang idrag ng elemento
Mga kaganapan na nangyayari sa layunin ng paglagay:
- ondragenter - Nangyayari kapag ang inidrag na elemento ay pumasok sa layunin na ilagay
- ondragover - Nangyayari kapag ang inidrag na elemento ay nasa layunin na ilagay
- ondragleave - Nangyayari kapag ang inidrag na elemento ay inalis sa layunin na ilagay
- ondrop - Nangyayari kapag ang inidrag na elemento ay ilagay sa layunin na ilagay
Halimbawa
Ipaglalagay ang maaari tanggapin ang isang draggable na elemento sa elemento <div> at magsagawa ng JavaScript:
<div ondrop="myFunction(event)"></div>
May mas maraming TIY na halimbawa sa ibaba ng pahina.
Gramata
Sa HTML:
<element ondrop="myScript">
Sa JavaScript:
object.ondrop = function(){myScript};
Sa JavaScript, gamit ang addEventListener() na paraan:
object.addEventListener("drop", myScript);
Komentaryo:Internet Explorer 8 o ang mas maaga na bersyon ay hindi sumusuporta addEventListener() method。
Detalye ng teknolohiya
| Bubbling: | Suportado |
|---|---|
| Makakansela: | 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 na ito.
| kaganapan | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| ondrop | 4.0 | 9.0 | 3.5 | 6.0 | 12.0 |
Higit pang mga halimbawa
Mga gawaing eksemplo ng lahat ng posibleng mga kaganapan ng pagdred at pag-iwan:
<p draggable="true" id="dragtarget">Mag-drag ko!</p>
<div class="droptarget">Mag-iwan dito!</div>
<script>
/* ----------------- Ang mga kaganapan na nangyari sa tagapagdred ----------------- */
document.addEventListener("dragstart", function(event) {
// ang dataTransfer.setData() method ay nagtatakda ng uri ng datos at ang halaga ng datos na ibinigay ng inidrag na datos
event.dataTransfer.setData("Text", event.target.id);
// Magbigay ng ilang teksto kapag nagsimula ang pagdred ng p element
document.getElementById("demo").innerHTML = "Nagsimula ang pagdred ng p element.";
// Baguhin ang transparency ng puwedeng i-drag na elemento
event.target.style.opacity = "0.4";
});
// Pagdred ng p element, baguhin ang kulay ng teksto sa output
document.addEventListener("drag", function(event) {
document.getElementById("demo").style.color = "red";
});
// Pagkatapos ng pagdred ng p element, magbigay ng ilang teksto at ireset ang transparency
document.addEventListener("dragend", function(event) {
document.getElementById("demo").innerHTML = "Natapos ang pagdred ng 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>
