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

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

HTML | DOM ondrop 事件

ondrop 事件是 HTML 和 JavaScript DOM 中的一个事件属性，它用于在一个元素或文档中放置（拖动并放下）另一个元素时触发。

语法
object.ondrop = function(){myScript};
示例
<!DOCTYPE html>
<html>
<head>
<style>
#draggable {
  width: 100px;
  height: 100px;
  background-color: red;
  padding: 10px;
  text-align: center;
  font-weight: bold;
  color: white;
  cursor: move;
}
#droptarget {
  width: 300px;
  height: 300px;
  border: 1px solid black;
}
</style>
<script>
function allowDrop(event) {
  event.preventDefault();
}

function drag(event) {
  event.dataTransfer.setData("text", event.target.id);
}

function drop(event) {
  event.preventDefault();
  var data = event.dataTransfer.getData("text");
  event.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<h2>HTML5 Drag and Drop</h2>

<div id="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<br>

<div id="draggable" draggable="true" ondragstart="drag(event)">
  Drag me
</div>

</body>
</html>

在这个示例中，有两个元素：draggable 和 droptarget。第一个元素是可以拖动的，也就是当我们按住它并移动鼠标时它会跟随鼠标一起移动。当将它拖到 droptarget 上并按住鼠标不放时，会触发 ondrop 事件，然后将 draggable 移动到 droptarget 里面。

当我们在 droptarget 元素上移动时，鼠标指针的图标会是一个不允许的符号。但是，当我们将 draggable 元素拖到 droptarget 上时，鼠标指针的图标会变成一个允许的符号，表示可以执行 ondrop 动作。

参数

ondrop 事件接收一个事件参数 event，它包含了与事件相关的信息。这个参数是可选的，也可以省略。

preventDefault() 方法

preventDefault() 方法用于阻止浏览器执行对事件的默认操作。在 drop() 函数中，我们调用 preventDefault() 方法来防止浏览器打开拖放的元素作为链接的默认操作。

setData() 方法

setData() 方法是 DataTransfer 对象的方法，用于设置用于拖放操作的数据格式和数据。

getData() 方法

getData() 方法是 DataTransfer 对象的方法，用于获取用于拖放操作的数据格式和数据。它接收一个参数 format，用于指定要获取哪种格式的数据。在示例中，我们用 getData("text") 获取了文本数据。

参考文献