ondrag 事件
描述
ondrag 事件在一個選擇被拖動時發生。
拖放是 HTML 中的常見功能。它指的是“抓取”一個物件並將其拖動到不同位置的操作。
要使元素可拖拽，請使用draggable 屬性。
更多資訊請參見HTML 拖放教程。
連結和圖片預設可拖拽，不需要 draggable 屬性。
在拖放操作的不同階段會發生許多事件（見下文）
拖放事件
在可拖拽元素上
| 事件 | 發生時間 |
|---|---|
| ondrag | 元素正在被拖拽 |
| ondragstart | 使用者開始拖拽一個元素 |
| ondragend | 使用者已完成拖拽一個元素 |
注意：在拖拽元素時，ondrag 事件每 350 毫秒觸發一次。
在拖放目標上
| 事件 | 發生時間 |
|---|---|
| ondragenter | 被拖拽元素進入放置目標 |
| ondragleave | 被拖拽元素離開放置目標 |
| ondragover | 被拖拽元素在放置目標上方 |
| ondrop | 被拖拽元素被放置到目標上 |
另請參閱
教程
語法
技術詳情
| 冒泡 | 是 |
|---|---|
| 可取消 | 是 |
| 事件型別 | DragEvent |
| HTML 標籤 | 所有 HTML 元素 |
| DOM 版本 | Level 3 Events |
更多示例
示例
所有可能拖放事件的演示
<p draggable="true" id="dragtarget">拖動我！</p>
<div class="droptarget">拖放到此處！</div>
<script>
// 在拖拽目標上觸發的事件
document.addEventListener("dragstart", function(event) {
// dataTransfer.setData() 方法設定拖動資料的資料型別和值
event.dataTransfer.setData("Text", event.target.id);
// 在開始拖拽 p 元素時輸出一些文字
document.getElementById("demo").innerHTML = "開始拖拽 p 元素。";
// 改變可拖動元素的不透明度
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 = "完成拖拽 p 元素。";
event.target.style.opacity = "1";
});
// 在拖放目標上觸發的事件
// 當可拖拽的 p 元素進入拖放目標時，改變 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 元素離開拖放目標時，重置 DIV 的邊框樣式
document.addEventListener("dragleave", function(event) {
if ( event.target.className == "droptarget" ) {
event.target.style.border = "";
}
});
/* 在放置時 - 阻止瀏覽器對資料的預設處理（預設是放置時作為連結開啟）
重置輸出文字的顏色和 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>
自己動手試一試 »
瀏覽器支援
ondrag 是 DOM Level 3 (2004) 特性。
所有現代瀏覽器都完全支援它
| Chrome | Edge | Firefox | Safari | Opera | IE |
| 是 | 是 | 是 | 是 | 是 | 11 |
