📌  相关文章
📜  HTML | ondrop 事件属性(1)

📅  最后修改于: 2023-12-03 15:15:38.385000             🧑  作者: Mango

HTML | ondrop 事件属性

ondrop 事件属性是在一个元素被拖拽并放置到另一个元素上时触发的事件。这个事件属性被用来指定发生 drop 事件时要执行的JavaScript代码。

语法
<element ondrop="javascript: someFunc()">
事件对象

在 drop 事件的监听器中，可以使用 event 参数来访问事件对象。这个事件对象包含了一些属性和方法，例如：

  • dataTransfer：用于访问正在被拖拽的数据
  • preventDefault()：用于阻止默认的 drop 行为
  • stopPropagation()：用于阻止事件继续冒泡到父元素
示例

下面是一个简单的示例，演示了如何使用 ondrop 事件属性和 dataTransfer 对象来拖拽和放置一些文本：

<!DOCTYPE html>
<html>
<body>

<div ondragover="event.preventDefault()" ondrop="drop(event)">
  <p>将文本拖拽到这里</p>
</div>

<script>
function drop(event) {
  event.preventDefault();
  var data = event.dataTransfer.getData("text");
  event.target.innerHTML = data;
}
</script>

</body>
</html>

在这个示例中，当鼠标在 div 元素上拖动时，ondragover 事件被触发并调用 preventDefault() 方法来阻止默认的行为（通常是拒绝拖放）。当鼠标在 div 元素上放下时，ondrop 事件被触发并调用 drop() 方法来获取被拖拽的数据并将其插入到 div 元素中。