html5拖放必须设draggable="true"并实现dragstart等事件；默认仅img、a可拖；需阻止dragover默认行为才能触发drop；html4无原生支持，依赖鼠标事件模拟。
HTML5 拖放功能必须设置 draggable="true"
HTML5 的拖放不是默认开启的。哪怕元素视觉上可拖，<div>、<code><p></p>、<span></span> 这类非表单/链接元素默认 draggable 值为 false，拖不动。
必须显式声明：
<div draggable="true">我能被拖</div>
-
draggable是布尔属性，设为"true"（字符串）或直接写draggable都生效 -
<img alt="html5的拖放功能怎么实现_html4能拖拽元素吗【操作】" >和<a></a>默认可拖，但若需自定义拖拽行为（如拖文本、阻止默认图片下载），仍要监听事件并调用event.preventDefault() - 仅设
draggable="true"不够——必须实现至少一个拖放事件（如dragstart），否则 Chrome/Firefox 会静默禁用拖拽
关键事件链：从 dragstart 到 drop
拖放是多阶段协作过程，漏掉任一环节都可能失败：
-
dragstart：在被拖元素上触发，用于设置拖拽数据（event.dataTransfer.setData()）和视觉反馈（如修改opacity） -
dragover：在目标区域上持续触发，**必须阻止默认行为**，否则drop事件不会触发：target.addEventListener('dragover', e => e.preventDefault()); -
drop：用户松手时触发，读取数据：e.dataTransfer.getData('text/plain') -
dragend：无论是否成功放置都会触发，适合清理状态
注意：dragenter 和 dragleave 可用于高亮目标区，但不参与数据传递。
立即学习“前端免费学习笔记（深入）”；
HTML4 完全不支持原生拖放 API
HTML4 没有 draggable 属性，也没有 dataTransfer 对象或 drag* 事件。所谓“HTML4 能拖拽”，实际是靠以下方式模拟：
- 鼠标事件（
mousedown/mousemove/mouseup）手动计算位置 + 绝对定位移动元素 - 依赖 jQuery UI
.draggable()等库封装（底层仍是 mouse 事件） - 无法与系统级拖放（如拖文件到浏览器、拖文字到编辑器）互通
这些方案不能触发原生 drop 文件上传，也不能响应外部拖入的 URL 或文本。
常见失效原因：样式、嵌套与事件捕获
即使代码逻辑正确，也可能因以下细节失败：
- 目标容器没有设置
height或min-height，导致dragover无处触发（空<div> 默认高度为 0） <li>父容器用了 <code>pointer-events: none，拦截了所有鼠标事件，包括拖放 - 目标元素内含子元素，而
dragover监听绑在了子元素上——松手时实际落在父容器空白处，drop不触发 - 使用了
event.stopPropagation()在中间层，阻断了dragenter向父级冒泡，导致父级高亮失效
最稳妥做法：在目标容器自身监听 dragover 和 drop，并确保它有可交互的尺寸和层级。
