JavaScript拖放功能依赖原生Drag and Drop API，需设置draggable="true"、在dragstart中用setData存数据、在dragover中preventDefault以启用drop、在drop中用getData取数据并处理；移动端不支持，需降级方案。
JavaScript 实现拖放功能主要依靠原生的 Drag and Drop API，它提供了一套事件机制（如 dragstart、dragover、drop 等），配合少量 DOM 操作就能完成基本拖放交互。关键不是写多少代码，而是理解哪些事件必须处理、哪些默认行为必须阻止。
设置可拖动元素
默认情况下，只有图片、链接和选中的文本能被拖拽。若想让任意元素（比如 <div>）可拖，需添加 <code>draggable="true" 属性：
<div draggable="true" id="item">拖我试试</div>
仅加这个属性还不够，还需监听 dragstart 事件来指定拖拽数据：
- 在
dragstart中调用event.dataTransfer.setData(format, data)存入数据（如文本、ID） - 常用 format 是
"text/plain"或自定义类型如"application/my-item" - 可顺便设置拖拽时的视觉反馈，例如
event.dataTransfer.effectAllowed = "move"
目标区域必须允许放置
目标容器（如 <div id="drop-zone">）默认不响应放置操作。要让它“接受拖入”，需做两件事：<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/c1c2c2ed740f" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">Java免费学习笔记（深入）</a>”；</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill10362" title="java-api-doc-generator"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20d79f23518.jpg" alt="java-api-doc-generator" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill10362" title="java-api-doc-generator">java-api-doc-generator</a>
<p>分析 Java Spring Boot 后端 Controller 代码，自动生成 Markdown 格式的接口文档。当用户说“生成 Java 接口文档”、“生成 API 文档”、“从 Spring 代码生成文档”时触发。</p>
</div>
<a href="/xiazai/skill10362" title="java-api-doc-generator" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<ul>
<li>监听 <code>dragover 事件，并在其中调用 event.preventDefault() —— 这是关键！否则 drop 事件根本不会触发
dragenter 和 dragleave 来添加/移除高亮样式捕获并处理放置动作
当用户在目标区松开鼠标，会触发 drop 事件：
- 同样需要
event.preventDefault()（虽然dragover已阻止过，但这里仍建议写上） - 通过
event.dataTransfer.getData(format)取出之前存的数据（如元素 ID） - 根据业务逻辑执行操作：移动 DOM 节点、更新状态、发起请求等
- 注意：
getData()返回的是字符串，复杂数据建议 JSON 序列化后传入
常见坑与建议
拖放看似简单，但几个细节容易导致失败：
-
忘记在
dragover中调用preventDefault()→drop事件永不触发 - 用
innerHTML或appendChild移动元素时未考虑原始位置是否还在文档流中 - 跨浏览器时，
dataTransfer.files仅在文件拖入时可用，普通元素拖拽不包含文件对象 - 移动端不支持原生 Drag and Drop API，需用 touch 事件模拟或引入第三方库（如
interact.js）
基本上就这些。不需要框架也能跑起来，但要注意事件顺序和默认行为拦截。
