Evento ondragover
Definizione e uso
Si verifica l'evento ondragover quando un elemento trascinabile o una selezione di testo viene trascinato su un punto di destinazione valido.
Per impostazione predefinita, non è possibile eliminare dati/elementi in altri elementi. Per permettere il posizionamento, dobbiamo bloccare il trattamento predefinito dell'elemento. Questo viene fatto chiamando il metodo event.preventDefault() dell'evento ondragover.
Il trascinamento e il rilascio è una funzione comune in HTML5. È quando si 'prende' un oggetto e si trascina in diverse posizioni. Per saperne di più, leggi i nostri articoli su Trascinamento HTML5della guida HTML.
Nota:Per rendere un elemento trascinabile, utilizzare il tutorial globale Attributo draggable HTML5。
Suggerimento:Per impostazione predefinita, i link e le immagini sono trascinabili senza bisogno dell'attributo draggable.
In diverse fasi dell'operazione di trascinamento e rilascio, vengono utilizzati molti eventi e possono verificarsi:
Eventi scatenati sull'elemento sorgente (destinazione trascinabile):
- ondragstart - Si verifica quando l'utente inizia a trascinare l'elemento
- ondrag - Si verifica quando l'elemento viene trascinato
- ondragend - Si verifica quando l'utente completa la trascinazione dell'elemento
Eventi scatenati sul punto di destinazione:
- ondragenter - Si verifica quando l'elemento trascinato entra nel punto di destinazione
- ondragover - Si verifica quando l'elemento trascinato si trova sul punto di destinazione
- ondragleave - Si verifica quando l'elemento trascinato lascia il punto di destinazione
- ondrop - Si verifica quando l'elemento trascinato viene posizionato sul punto di destinazione
Nota:Quando si trascina un elemento, l'evento ondragover viene scatenato ogni 350 millisecondi.
Esempio
Esegui JavaScript quando l'elemento viene trascinato sul punto di destinazione:
<div ondragover="myFunction(event)"></div>
Più esempi TIY sono disponibili nella pagina in basso.
Sintassi
In HTML:
<elemento ondragover="myScript">
In JavaScript:
oggetto.ondragover = function(){myScript};
In JavaScript, utilizzare il metodo addEventListener():
oggetto.addEventListener("dragover", myScript);
Nota:Internet Explorer 8 o versioni precedenti non supportano addEventListener() 方法。
技术细节
| 冒泡： | 支持 |
|---|---|
| 可取消： | 支持 |
| 事件类型： | DragEvent |
| 支持的 HTML 标签： | 所有 HTML 元素 |
| DOM 版本： | Level 3 Events |
浏览器支持
表中的数字注明了完全支持该事件的首个浏览器版本。
| 事件 | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| ondragover | 4.0 | 9.0 | 3.5 | 6.0 | 12.0 |
更多实例
对所有可能的拖放事件的演示：
<p draggable="true" id="dragtarget">Drag me!</p>
<div class="droptarget">Drop here!</div>
<script>
/* ----------------- 在拖动目标上触发的事件 ----------------- */
document.addEventListener("dragstart", function(event) {
// dataTransfer.setData()方法设置被拖拽数据的数据类型和值
event.dataTransfer.setData("Text", event.target.id);
// 开始拖动 p 元素时输出一些文本
document.getElementById("demo").innerHTML = "Started to drag the p element.";
// 更改可拖动元素的不透明度
event.target.style.opacity = "0.4";
});
// 拖动 p 元素时，更改输出文本的颜色
document.addEventListener("drag", function(event) {
document.getElementById("demo").style.color = "red";
});
// 完成拖动 p 元素后输出一些文本并重置不透明度
document.addEventListener("dragend", function(event) {
document.getElementById("demo").innerHTML = "Finished dragging the p element.";
event.target.style.opacity = "1";
});
/* ----------------- Eventi scatenati sul punto di destinazione di deposito ----------------- */
// Change the border style of the DIV when the draggable p element enters the droptarget
document.addEventListener("dragenter", function(event) {
if ( event.target.className == "droptarget" ) {
event.target.style.border = "3px dotted red";
}
});
// By default, data/elements cannot be dropped on other elements. To allow dropping, we must prevent the default handling of the element
document.addEventListener("dragover", function(event) {
event.preventDefault();
});
// Reset the border style of the DIV when the draggable p element leaves the droptarget
document.addEventListener("dragleave", function(event) {
if ( event.target.className == "droptarget" ) {
event.target.style.border = "";
}
});
/* On drop - Prevent the browser's default handling of data (open as link by default on drop)
Reimposta il colore del testo di output e il colore del bordo del DIV
Ottieni i dati trascinati utilizzando il metodo dataTransfer.getData()
I dati trascinati sono l'id dell'elemento trascinato ("drag1")
Aggiungi l'elemento trascinato all'elemento di destinazione
*/
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>
