很多面试官喜欢问这个问题，感觉就像他们公司的拖拽都是自己实现的一样，哈哈，话是这么说，但面试人家要问，我们就掌握一下呗。
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 的拖放功能使得创建交互式的拖放操作变得非常简单和直观。
