必须设置 draggable="true" 才能触发原生拖拽事件；dragstart 中需用 dataTransfer.setData() 写入数据；drop 前必须在 dragover 中调用 preventDefault()；推荐用 transform: translate 定位便签以提升性能。
怎么用
属性让便签可拖拽
HTML 原生拖拽不是靠 JS 模拟位移，而是靠浏览器内置的拖放 API 触发事件流。必须给元素设
，否则连
都不会触发——这是最常被忽略的起点。
常见错误现象：
绑定了但没反应，八成是漏了这个属性。
是布尔属性，写成
或
都行，但不能写成
后又想拖（它会彻底禁用）
只对
和
默认开启拖拽，其他标签如
draggabledraggable="true"dragstartelement.addEventListener('dragstart', ...)draggabledraggabledraggable="true"draggable="false"
必须显式声明
移动端不支持原生
draggable
，别指望它在 iOS Safari 上工作
dragstart
里必须设置
dataTransfer
吗
必须。浏览器只允许在
dragstart
事件中写入
dataTransfer
，之后所有阶段（
dragover
、
drop
）都只能读取——这是安全限制，不是可选项。
使用场景：你想把便签的 ID 或内容传到目标区域，就得在这一步塞进去。
立即学习
“
前端免费学习笔记（深入）
”；
不设
dataTransfer.setData()
，
drop
时
event.dataTransfer.getData()
一定为空字符串
推荐用自定义类型如
'text/plain'
或
'application/json'
，避免和浏览器默认行为（如拖文本、图片）冲突
别往
dataTransfer
里塞 DOM 节点或函数，它只接受字符串
为什么
drop
事件不触发
90% 的原因是没阻止
dragover
的默认行为。浏览器默认把
dragover
当作“不允许放置”，必须显式调用
event.preventDefault()
才能解锁
drop
。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
性能影响：这个
preventDefault()
要在每次
dragover
中执行，不能只绑一次——因为拖拽过程中该事件高频触发，不拦住就会不断重置状态。
只在目标容器（比如便签墙的
dragover
和
drop
，别挂在
document
上盲目拦截
drop
事件里记得再调一次
event.preventDefault()
，虽然多数情况不影响，但规范要求且部分浏览器（如旧版 Firefox）会因此丢数据
如果目标区是空的，容易误以为没响应，其实是
dragover
没拦住导致
drop
根本没机会触发
便签定位用
position: absolute
还是
transform
用
transform: translate(x, y)
。直接改
left/top
会触发 layout，而
transform
只走合成层，拖拽过程更顺滑，尤其在低端设备上差异明显。
兼容性注意：IE10+ 支持
transform
，但 IE 不支持
draggable
，所以实际项目里可以放心用。
把便签初始位置存在
dataset
里（如
data-x="120" data-y="-40"
），拖拽中实时更新这些值，
drop
后再存回 localStorage
不要在
drag
事件里直接操作样式，它不保证每帧都触发；改用
requestAnimationFrame
节流 +
transform
如果用 CSS Grid 或 Flex 布局做基础网格，拖拽态建议临时切到
position: fixed
+
transform
，避免干扰布局流
真正难的不是拖拽本身，是拖拽结束后的坐标归一化——不同缩放、滚动位置、iframe 嵌套下，
clientX/Y
到真实容器坐标的换算很容易出偏移。这块没标准解法，得根据你的容器是否固定、是否带 transform、有没有 scroll 父级，一个个 case 处理。