ondragover 事件
定義和用法
當可拖動元素或文本選擇被拖動到有效放置目標上時，會發生 ondragover 事件。
默認情況下，不能在其他元素中刪除數據/元素。為了允許放置，我們必須阻止元素的默認處理。這是通過調用 ondragover 事件的 event.preventDefault() 方法來實現的。
拖放是 HTML5 中非常常見的功能。就是當您“抓取”一個對象并將其拖動到不同位置時。如需學習更多知識，請閱讀我們關于 HTML5 拖放的 HTML 教程。
注釋：如需使元素可拖動，請使用全局 HTML5 draggable 屬性。
提示：默認情況下，鏈接和圖像是可拖動的，不需要 draggable 屬性。
在拖放操作的不同階段，有許多事件被使用，并且可能發生：
在可拖動目標（源元素）上觸發的事件：
- ondragstart - 當用戶開始拖動元素時發生
- ondrag - 當元素被拖動時發生
- ondragend - 當用戶完成拖動元素時發生
在放置目標上觸發的事件：
- ondragenter - 當被拖動的元素進入放置目標時發生
- ondragover - 當被拖動的元素在放置目標上時發生
- ondragleave - 當被拖動的元素離開放置目標時發生
- ondrop - 當被拖動的元素被放在放置目標上時發生
注釋：拖動元素時，ondragover 事件每 350 毫秒觸發一次。
語法
在 HTML 中：
<element ondragover="myScript">
在 JavaScript 中：
object.ondragover = function(){myScript};
在 JavaScript 中，使用 addEventListener() 方法：
object.addEventListener("dragover", myScript);
注釋：Internet Explorer 8 或更早的版本不支持 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";
});
/* ----------------- 在放置目標上觸發的事件 ----------------- */
// 當可拖動的 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>
