ondragenter 事件
Definition and Usage
Nangyayari ang ondragenter event kapag ang puwedeng ilipat na elemento o ang pagpili ng teksto ay pumasok sa wastong paglalagay na target.
Ang ondragenter at ondragleave events ay maaaring makatulong sa user na maunawaan kung isang puwedeng ilipat na elemento ay papasok o iwan sa paglalagay na target. Halimbawa, maaaring itakda ang kulay ng background kapag ang elemento ay pumasok sa target at alisin ang kulay kapag ang elemento ay iwan.
Drag and drop ay isang napakakaraniwang function sa HTML5. Ito ay kapag kaagad kumuha ka ng isang bagay at inililipat ito sa iba't ibang lokasyon. Para matuto ng mas marami, basahin ang aming tungkol sa HTML5 拖放HTML tutorial.
Komentaryo:Para gawing puwedeng ilipat ang elemento, gamit ang pangkalahatang HTML5 draggable attribute.
Mga tagubilin:Bilang default, ang mga link at ang mga imahe ay puwedeng ilipat, hindi kailangan ng draggable attribute.
May maraming kaganapan na ginagamit sa iba't ibang yugto ng paglipat at maaaring mangyari:
Mga kaganapan na nangyayari sa target na puwedeng ilipat (source element):
- ondragstart - Kapag nagsimula ang user ang paglipat ng elemento
- ondrag - Kapag ang elemento ay inililipat
- ondragend - Kapag nakumpleto ng user ang paglipat ng elemento
Mga kaganapan sa pagpasok sa paglalagay na target:
- ondragenter - Kapag ang inililipat na elemento ay pumasok sa paglalagay na target
- ondragover - Kapag ang inililipat na elemento ay nasa paglalagay na target
- ondragleave - Kapag ang inililipat na elemento ay iwan sa paglalagay na target
- ondrop - Kapag ang inililipat na elemento ay ilagay sa paglalagay na target
Sample
Ang JavaScript ay isinasagawa kapag ang mahiwalay na elemento ay inilagay sa paglalagay na target:
<div ondragenter="myFunction(event)"></div>
May mas maraming TIY example sa ibaba ng pahina.
Grammar
Sa HTML:
<element ondragenter="myScript">
Sa JavaScript:
object.ondragenter = function(){myScript};
Sa JavaScript, gamit ang addEventListener() method:
object.addEventListener("dragenter", myScript);
Komentaryo:Internet Explorer 8 o mas maagang bersiyon ay hindi sumusuporta addEventListener() Method.
Detalye ng Teknolohiya
| Bubbling: | Suportado |
|---|---|
| Makakancela: | Suportado |
| Uri ng Event: | DragEvent |
| Suportadong HTML tag: | Lahat ng HTML element |
| DOM Version: | Level 3 Events |
Suporta ng Browser
Ang mga numero sa talahanayan ay naglalarawan ng unang bersyon ng browser na nag-suporta sa event na ito.
| Event | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| ondragenter | 4.0 | 9.0 | 3.5 | 6.0 | 12.0 |
Higit pang mga halimbawa
Mga gawain ng demo para sa lahat ng posibleng mga event 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>
/* ----------------- Sa event na nangyari sa target ng pag-drag ----------------- */
document.addEventListener("dragstart", function(event) {
// I-set sa dataTransfer.setData() method ang uri ng datos at ang halaga ng inidrag na datos
event.dataTransfer.setData("Text", event.target.id);
// Magpakita ng ilang teksto kapag nagsimula ang pag-i-drag ang p element
document.getElementById("demo").innerHTML = "Nagsimula ang pag-i-drag ang p element.";
// Ayusin ang opakidad ng puwedeng i-drag na elemento
event.target.style.opacity = "0.4";
});
// Pag-i-drag ang p element, ayusin ang kulay ng teksto sa output
document.addEventListener("drag", function(event) {
document.getElementById("demo").style.color = "red";
});
// Natapos na i-drag ang p element at magpakita ng ilang teksto at i-reset ang opakidad
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>
