HTML5拖拽API通过draggable属性启用拖拽，配合dragstart设置数据、dragover阻止默认行为、drop执行放置逻辑，并用dragenter/leave等事件优化交互反馈。
如果您希望在网页中实现元素的拖拽功能，HTML5 提供了原生的拖拽 API，无需依赖第三方库即可完成基本拖拽交互。以下是使用 HTML5 拖拽 API 制作可拖拽元素的具体实现方法与事件处理步骤：
一、设置 draggable 属性启用拖拽
HTML5 中，只有将元素的 draggable 属性显式设为 true，该元素才可被用户拖拽。默认情况下，图片、链接等部分元素 draggable 为 true，但 div、span 等常规容器默认为 false，必须手动开启。
1、在目标元素标签中添加 draggable="true" 属性。
2、例如：可拖拽内
容。
3、确保该元素具有明确的宽高或内容，否则可能因不可见或无尺寸而无法触发拖拽。
二、监听并处理 dragstart 事件
dragstart 事件在用户开始拖拽时触发，是初始化拖拽数据的关键时机。此时需通过 dataTransfer 对象设置拖拽过程中携带的数据及视觉反馈。
1、为 draggable 元素绑定 ondragstart 事件处理器或使用 addEventListener。
2、在事件处理函数中调用 event.dataTransfer.setData() 方法，例如：event.dataTransfer.setData('text/plain', 'item-001')。
3、可选：调用 event.dataTransfer.setDragImage() 自定义拖拽时的图标，或使用 CSS 的 ::-webkit-drag 样式调整半透明效果。
三、配置放置目标并阻止默认行为
要使某区域接受拖拽元素，必须为该目标元素监听 dragover 和 drop 事件，并在 dragover 中取消浏览器默认行为，否则 drop 事件不会触发。
1、为目标容器（如
）添加 ondragover 事件处理函数。2、在该函数内执行 event.preventDefault()，这是允许放置的必要条件。
3、同时可设置 ondragenter 以添加进入提示样式，ondragleave 移除提示样式。
四、捕获 drop 事件并执行放置逻辑
当用户在有效放置目标上释放鼠标时，drop 事件被触发。此时应读取 dataTransfer 中的数据，并完成 DOM 移动、克隆或业务逻辑处理。
1、为目标容器绑定 ondrop 事件处理器。
2、在处理器中再次调用 event.preventDefault()，确保事件正常传递。
3、通过 event.dataTransfer.getData('text/plain') 获取拖拽时设置的数据标识。
4、根据需要执行 appendChild、insertBefore 或 cloneNode 等 DOM 操作，例如将被拖元素移动至目标容器内部。
五、处理拖拽过程中的状态反馈事件
为提升用户体验，可通过 dragenter、dragleave、dragend 等事件动态更新界面状态，例如高亮目标区、还原源元素样式或记录操作结果。
1、在 dragenter 事件中为放置区域添加 CSS 类，例如：event.target.classList.add('drag-over')。
2、在 dragleave 事件中移除该类，避免误判离开边界。
3、在 dragend 事件中重置源元素样式，并判断 event.dataTransfer.dropEffect 确认是否成功放置（如值为 'none' 表示被取消）。
