很多面试官喜欢问这个问题，感觉就像他们公司的拖拽都是自己实现的一样，哈哈，话是这么说，但面试人家要问，我们就掌握一下呗。
HTML5 提供了一些原生的拖放（drag and drop）功能，使得开发者可以轻松实现元素的拖动和放置。这些功能主要通过一系列的事件和属性来实现。以下是 HTML5 拖放功能的关键概念和步骤：
目录
1. 可拖动元素
2. 事件处理
3. 示例代码
1. 可拖动元素
要使一个元素可拖动，需要设置它的 draggable 属性为 true。例如：
<div id="dragElement" draggable="true">拖动我!</div>
2. 事件处理
拖放操作涉及以下几个关键事件：
dragstart: 当拖动操作开始时触发。在这个事件处理程序中，通常会设置要拖动的数据。drag: 当元素被拖动时不断触发。dragend: 当拖动操作结束时触发。dragenter: 当被拖动的元素进入放置目标时触发。dragover: 当被拖动的元素在放置目标上方移动时触发。为了允许放置，必须在这个事件中调用event.preventDefault()。dragleave: 当被拖动的元素离开放置目标时触发。drop: 当被拖动的元素放置在放置目标时触发。在这个事件处理程序中，通常会处理拖动的数据。
3. 示例代码
以下是一个简单的示例，展示了如何实现拖放功能：
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Drag and Drop 示例</title>
<style>
#dragElement {
width: 100px;
height: 100px;
background-color: blue;
color: white;
text-align: center;
line-height: 100px;
margin: 10px;
cursor: move;
}
#dropZone {
width: 200px;
height: 200px;
border: 2px dashed #ccc;
text-align: center;
line-height: 200px;
margin: 10px;
}
</style>
</head>
<body>
<div id="dragElement" draggable="true">拖动我!</div>
<div id="dropZone">放置目标</div>
<script>
const dragElement = document.getElementById('dragElement');
const dropZone = document.getElementById('dropZone');
dragElement.addEventListener('dragstart', function(event) {
event.dataTransfer.setData('text/plain', '这是拖动的数据');
});
dropZone.addEventListener('dragover', function(event) {
event.preventDefault();
});
dropZone.addEventListener('drop', function(event) {
event.preventDefault();
const data = event.dataTransfer.getData('text/plain');
dropZone.textContent = `放置的数据: ${data}`;
});
</script>
</body>
</html>
在这个示例中：
dragElement是可拖动的元素。dropZone是放置目标区域。- 当拖动开始时，
dragstart事件被触发，并且数据被设置。 dragover事件被触发时，event.preventDefault()被调用以允许放置。drop事件被触发时，放置的数据被读取并显示在dropZone中。
通过这种方式，HTML5 的拖放功能使得创建交互式的拖放操作变得非常简单和直观。
