ondragover 事件
Paglilinaw at paggamit
Kapag ang maaaring idrag na elemento o ang piniling teksto ay idrag sa wastong layunin ng paglagay, mangyayari ang ondragover na kaganapan.
Bakit ang datos o elemento ay hindi maaaring tanggalin mula sa ibang elemento sa likod. Upang payagan ang paglagay, kailangan naming pigilan ang pangkaraniwang paggamit ng elemento. Ito ay ginagawa sa pamamagitan ng pagtawag sa event.preventDefault() na kaganapan sa ondragover.
Ang pagdred ay isang napakakaraniwang pagamit sa HTML5. Ito ay kapag kaagad ka "hikayat" ang isang bagay at idrag ito sa iba't ibang lokasyon. Para matututuhan pa, basahin ang aming tungkol sa HTML5 拖放ng HTML na tutorial.
Komento:Para gawing maaaring idrag ang elemento, gamit ang global HTML5 draggable na atrributo.
Paalala:Bakit ang link at ang imaheng pangkalahatan ay maaaring idrag sa likod, hindi kailangan ng atrributo na draggable.
Sa iba't ibang yugto ng operasyon ng pagdred, maraming kaganapan ang ginagamit at maaaring mangyari:
Ang mga kaganapan na nangyayari sa layunin ng pagdred (mula sa pinagmulang elemento):
- ondragstart - Kapag ang user ay nagsimula ng idrag ang elemento
- ondrag - Kapag ang elemento ay idrag
- ondragend - Kapag ang user ay tapos na idrag ang elemento
Ang mga kaganapan na nangyayari sa layunin ng paglagay:
- ondragenter - Kapag ang idrag na elemento ay pumasok sa layunin ng paglagay
- ondragover - Kapag ang idrag na elemento ay nasa layunin ng paglagay
- ondragleave - Kapag ang idrag na elemento ay umalis sa layunin ng paglagay
- ondrop - Kapag ang idrag na elemento ay ilagay sa layunin ng paglagay
Komento:Sa panahon ng pagdred, ang ondragover na kaganapan ay sumusunod sa bawat 350 na milisegundo.
Halimbawa
Ipatupad ang JavaScript kapag ang elemento ay idrag sa layunin ng paglagay:
<div ondragover="myFunction(event)"></div>
May mas maraming TIY na halimbawa sa ibaba ng pahina.
Gramata
Sa HTML:
<element ondragover="myScript">
Sa JavaScript:
object.ondragover = function(){myScript};
Sa JavaScript, gamit ang addEventListener() na paraan:
object.addEventListener("dragover", myScript);
Komento:Internet Explorer 8 o ang mas maagang bersiyon ay hindi sumusuporta addEventListener() method.
Detalye ng teknolohiya
| Bubbling: | Suportado |
|---|---|
| Makakancela: | 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 naglalarawan ng unang bersyon ng browser na nagbibigay ng buong suporta sa kaganapan
| kaganapan | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| ondragover | 4.0 | 9.0 | 3.5 | 6.0 | 12.0 |
Higit pang mga halimbawa
Mga gawaing pag-drag at pag-iwan para sa lahat ng posibleng kaganapan ng pag-drag at pag-iwan:
<p draggable="true" id="dragtarget">I-drag ko!</p>
<div class="droptarget">Mag-iwan dito!</div>
<script>
/* ----------------- Ang mga kaganapan na nangyari sa target ng pag-drag ----------------- */
document.addEventListener("dragstart", function(event) {
// Ang method na dataTransfer.setData() ay nagtatakda ng uri ng datos at ang halaga ng datos na idrag
event.dataTransfer.setData("Text", event.target.id);
// Pagkatapos nagsimula i-drag ang p element, ipalabas ang ilang teksto
document.getElementById("demo").innerHTML = "Nagsimula na i-drag ang p element.";
// Baguhin ang opakidad ng puwedeng idrag na elemento
event.target.style.opacity = "0.4";
});
// Pagkatapos naidrag ang p element, baguhin ang kulay ng ipalabas na teksto
document.addEventListener("drag", function(event) {
document.getElementById("demo").style.color = "red";
});
// Pagkatapos naidrag ang p element, ipalabas ang ilang teksto at ireset 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>
