答案：HTML5通过draggable属性和dragstart、dragover、drop等事件实现拖拽功能，利用dataTransfer传递数据并配合CSS提供视觉反馈。

HTML5原生提供了拖拽（Drag and Drop）API，可以轻松实现元素的拖放功能，无需依赖第三方库。整个过程主要涉及拖拽源元素和放置目标区域的事件监听与处理。

启用元素拖拽

默认情况下，并非所有元素都可拖动。要使一个元素可拖拽，需设置其 draggable="true" 属性：

只有设置了该属性的元素才能触发拖拽事件。

关键拖拽事件说明

拖拽过程包含多个事件，核心如下：

• dragstart：拖拽开始时触发，通常在此设置拖拽数据
• dragover：拖拽过程中持续触发，必须阻止默认行为才能允许放置
• drop：在目标区域释放时触发，用于处理放置逻辑
• dragend：拖拽结束（无论是否成功），可用于清理样式或状态

实现拖拽文本或自定义数据

使用 dataTransfer 对象传递拖拽数据，如文本、类型等：

document.getElementById('dragElem').addEventListener('dragstart', function(e) {
  e.dataTransfer.setData('text/plain', '这是拖拽的数据');
});

document.getElementById('dropZone').addEventListener('dragover', function(e) {
  e.preventDefault(); // 允许放置
});

document.getElementById('dropZone').addEventListener('drop', function(e) {
  e.preventDefault();
  const data = e.dataTransfer.getData('text/plain');
  this.innerHTML = data;
});

实现元素交换或移动视觉反馈

可通过添加类名来提供拖拽过程中的视觉反馈：

配合CSS，可以高亮正在拖动的元素：

基本上就这些。只要理解 dragstart 设置数据、dragover 阻止默认、drop 获取数据这三个核心步骤，就能实现基本的拖拽功能。实际开发中注意兼容性和数据类型即可。