diff --git a/files/zh-cn/web/api/htmlelement/drag_event/index.md b/files/zh-cn/web/api/htmlelement/drag_event/index.md
index a962fdccca157e..445f8aa9e6f947 100644
--- a/files/zh-cn/web/api/htmlelement/drag_event/index.md
+++ b/files/zh-cn/web/api/htmlelement/drag_event/index.md
@@ -78,53 +78,53 @@ body {
```js
let dragged;
-/* events fired on the draggable target */
+/* 在可拖动的目标上触发的事件 */
const source = document.getElementById("draggable");
source.addEventListener("drag", (event) => {
console.log("dragging");
});
source.addEventListener("dragstart", (event) => {
- // store a ref. on the dragged elem
+ // 保存被拖动元素的引用
dragged = event.target;
- // make it half transparent
+ // 设置为半透明
event.target.classList.add("dragging");
});
source.addEventListener("dragend", (event) => {
- // reset the transparency
+ // 拖动结束,重置透明度
event.target.classList.remove("dragging");
});
-/* events fired on the drop targets */
+/* 在放置目标上触发的事件 */
const target = document.getElementById("droptarget");
target.addEventListener(
"dragover",
(event) => {
- // prevent default to allow drop
+ // 阻止默认行为以允许放置
event.preventDefault();
},
false,
);
target.addEventListener("dragenter", (event) => {
- // highlight potential drop target when the draggable element enters it
+ // 在可拖动元素进入潜在的放置目标时高亮显示该目标
if (event.target.classList.contains("dropzone")) {
event.target.classList.add("dragover");
}
});
target.addEventListener("dragleave", (event) => {
- // reset background of potential drop target when the draggable element leaves it
+ // 在可拖动元素离开潜在放置目标元素时重置该目标的背景
if (event.target.classList.contains("dropzone")) {
event.target.classList.remove("dragover");
}
});
target.addEventListener("drop", (event) => {
- // prevent default action (open as link for some elements)
+ // 阻止默认行为(会作为某些元素的链接打开)
event.preventDefault();
- // move dragged element to the selected drop target
+ // 将被拖动元素移动到选定的目标元素中
if (event.target.classList.contains("dropzone")) {
event.target.classList.remove("dragover");
dragged.parentNode.removeChild(dragged);
diff --git a/files/zh-cn/web/api/htmlelement/drop_event/index.md b/files/zh-cn/web/api/htmlelement/drop_event/index.md
index 8c439bab49ebd1..bfb9408845fefe 100644
--- a/files/zh-cn/web/api/htmlelement/drop_event/index.md
+++ b/files/zh-cn/web/api/htmlelement/drop_event/index.md
@@ -5,7 +5,7 @@ slug: Web/API/HTMLElement/drop_event
{{APIRef}}
-**`drop`** 事件在元素或选中的文本被放置在有效的放置目标上时被触发。
+**`drop`** 事件在元素或文本选择被放置到有效的放置目标上时触发。为确保 `drop` 事件始终按预期触发,应当在处理 `dragover` 事件的代码部分始终包含 `preventDefault()` 调用。
## 语法
@@ -82,20 +82,20 @@ let dragged = null;
const source = document.getElementById("draggable");
source.addEventListener("dragstart", (event) => {
- // store a ref. on the dragged elem
+ // 保存被拖动元素的引用
dragged = event.target;
});
const target = document.getElementById("droptarget");
target.addEventListener("dragover", (event) => {
- // prevent default to allow drop
+ // 阻止默认行为以允许放置
event.preventDefault();
});
target.addEventListener("drop", (event) => {
- // prevent default action (open as link for some elements)
+ // 阻止默认行为(会作为某些元素的链接打开)
event.preventDefault();
- // move dragged element to the selected drop target
+ // 将被拖动的元素移动到选定的放置目标
if (event.target.className === "dropzone") {
dragged.parentNode.removeChild(dragged);
event.target.appendChild(dragged);