Update the Chinese translation related to drag and drop (#14900)

Co-authored-by: A1lo <yin199909@aliyun.com>

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);

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);