什么是拖放？
拖放是指在 Web 应用程序中，通过按住鼠标键不放并将其移动到另一个元素上释放来实现操作的一种方式。通常，可以在拖动操作开始时初始化数据，并在放置操作完成后将该数据传递给另一个应用程序。在 HTML 中，拖放操作由drag和drop事件组成。
HTML5中的拖放
在 HTML5 中，提供了一种新的 API 用于对拖放操作进行更好的控制。该 API 由多个事件、属性和方法组成，能够让开发者更加灵活地实现各种拖放操作需求。
在使用HTML5的拖放API实现操作的时候，我们需要注意一些基本的概念：
被拖动的元素：即触发拖动行为的元素。
放置目标：指可接受被拖动元素的元素。
数据传输：指拖动元素和放置目标之间的数据交互。
HTML5 拖放API的基本使用方法
HTML5拖放API提供了一组事件和方法，实现了拖放操作的主要功能。在使用HTML5拖放API时，我们需要完成以下基本步骤：
通过设置draggable属性来指定元素是否可以被拖动。
<div draggable="true">可以被拖动的元素</div>通过设置ondragstart事件来初始化拖动操作，该事件在开始拖动元素时触发。
<div ondragstart="drag(event)">可以被拖动的元素</div>在数据传输过程中，可以通过设置dataTransfer对象来传递数据。
function drag(event) {
event.dataTransfer.setData("text/plain", event.target.id);
}
通过设置ondragover事件来允许元素接受拖放元素。
<div ondragover="allowDrop(event)">可以接受拖放元素的元素</div>通过设置ondrop事件来定义元素接受被拖放元素时的行为。
<div ondrop="drop(event)">放置目标元素</div>在拖放操作结束时，清空dataTransfer对象。
function drop(event) {
event.preventDefault();
var data = event.dataTransfer.getData("text/plain");
event.target.appendChild(document.getElementById(data));
event.dataTransfer.clearData();
}
如何执行脚本来处理拖动和放置元素的事件？
在HTML5拖放API中，可以通过设置ondrop事件来定义元素接受被拖放元素时的行为。在这个事件中，可以执行任意的脚本来处理拖放元素的行为。例如，在拖拽一个元素时，可以在ondrop事件中实现将元素添加到指定的位置。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用HTML5拖放API</title>
<style>
#div1 {
width: 150px;
height: 150px;
padding: 10px;
border: 1px solid #aaaaaa;
}
#div2 {
width: 200px;
height: 200px;
padding: 10px;
border: 1px solid #aaaaaa;
}
</style>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="https://source.unsplash.com/random/150x150" draggable="true" ondragstart="drag(event)" id="drag1">
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<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));
document.getElementById('output').innerHTML = '元素 ' + data + ' 已经被拖拽到了目标元素 ' + event.target.id + ' 上';
}
</script>
<p id="output"></p>
</body>
</html>
上面的示例代码实现了一个简单的拖放操作，可将一个带有图片的元素拖放到一个空的容器中。在图像成功地被拖放到 div#div2 元素中之后，会利用JavaScript将消息输出到网页中。