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