语法
在类似 addEventListener() 这样的方法中使用事件名称，或设置事件处理器属性。
jsaddEventListener("drag", (event) => {});
ondrag = (event) => {};
事件类型
一个 DragEvent。继承自 Event。
事件属性
除了下面列出的属性外，还可以使用父接口 Event 的属性。
DragEvent.dataTransfer 只读
在进行拖放操作时，传输的数据。
示例
拖放示例
HTML
html
CSS
cssbody {
/* Prevent the user selecting text in the example */
user-select: none;
}
#draggable {
text-align: center;
background: white;
}
.dropzone {
width: 200px;
height: 20px;
background: blueviolet;
margin: 10px;
padding: 10px;
}
.dropzone.dragover {
background-color: purple;
}
.dragging {
opacity: 0.5;
}
JavaScript
jslet dragged;
/* 在可拖动的目标上触发的事件 */
const source = document.getElementById("draggable");
source.addEventListener("drag", (event) => {
console.log("dragging");
});
source.addEventListener("dragstart", (event) => {
// 保存被拖动元素的引用
dragged = event.target;
// 设置为半透明
event.target.classList.add("dragging");
});
source.addEventListener("dragend", (event) => {
// 拖动结束，重置透明度
event.target.classList.remove("dragging");
});
/* 在放置目标上触发的事件 */
const target = document.getElementById("droptarget");
target.addEventListener(
"dragover",
(event) => {
// 阻止默认行为以允许放置
event.preventDefault();
},
false,
);
target.addEventListener("dragenter", (event) => {
// 在可拖动元素进入潜在的放置目标时高亮显示该目标
if (event.target.classList.contains("dropzone")) {
event.target.classList.add("dragover");
}
});
target.addEventListener("dragleave", (event) => {
// 在可拖动元素离开潜在放置目标元素时重置该目标的背景
if (event.target.classList.contains("dropzone")) {
event.target.classList.remove("dragover");
}
});
target.addEventListener("drop", (event) => {
// 阻止默认行为（会作为某些元素的链接打开）
event.preventDefault();
// 将被拖动元素移动到选定的目标元素中
if (event.target.classList.contains("dropzone")) {
event.target.classList.remove("dragover");
dragged.parentNode.removeChild(dragged);
event.target.appendChild(dragged);
}
});
结果
规范
Specification
HTML# handler-ondrag
HTML# event-dnd-drag
浏览器兼容性
Loading…
参见
其他拖放事件：
dragstart
dragend
dragover
dragenter
dragleave
drop
其他目标上的此事件：
Window：drag 事件
Document：drag 事件
SVGElement：drag 事件
Help improve MDN
Was this page helpful to you?
Yes
No
Learn how to contribute
This page was last modified on 2025年6月24日 by MDN contributors.
View this page on GitHub • Report a problem with this content