draggable="true"仅启用拖放能力，不自动实现购物车逻辑；必须配合dragstart（setData传数据）、dragover（preventDefault允许放置）、drop（getData解析并更新购物车）三事件协同完成。
draggable="true" 本身不触发拖入购物车行为
HTML 的 draggable 属性只是开启原生拖放（drag-and-drop）的起点，它本身不会自动把图片“扔进”购物车——必须配合 dragstart、dragover、drop 等事件手动实现逻辑。很多开发者设了 draggable="true" 就以为完事了，结果拖不动、没反应、控制台报错 Failed to execute 'setData' on 'DataTransfer'，本质是漏写了事件监听或数据传递。
关键点在于：拖放是浏览器原生能力，但“商品识别”“购物车更新”这些业务逻辑全靠你写。
-
draggable="true"必须加在可拖拽的图片上，比如<img draggable="true" data-id="1024" data-price="299"> -
dragstart里必须调用event.dataTransfer.setData()，否则目标区域无法接收数据；常用格式是event.dataTransfer.setData('text/plain', event.target.dataset.id) - 购物车容器（如
<div id="cart">）必须监听dragover并调用event.preventDefault()，否则drop事件根本不会触发
drop 事件里拿不到 dataset 是常见错误
很多人在 drop 回调里直接读 event.target.dataset，发现全是 undefined。这是因为拖放过程中，原始元素（图片）和目标元素（购物车）是分离的，event.target 是购物车容器，不是被拖的图片。
正确做法是在 dragstart 阶段把必要信息序列化传过去，比如 ID 和价格：
立即学习“前端免费学习笔记（深入）”；
img.addEventListener('dragstart', e => {
e.dataTransfer.setData('application/json', JSON.stringify({
id: e.target.dataset.id,
price: e.target.dataset.price,
name: e.target.alt
}));
});
然后在 drop 里解析：
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
cart.addEventListener('drop', e => {
e.preventDefault();
try {
const item = JSON.parse(e.dataTransfer.getData('application/json'));
addToCart(item); // 你的添加逻辑
} catch (err) {
console.warn('无效拖放数据', err);
}
});
- 不要用
'text/plain'存结构化数据，容易被浏览器转义或截断；'application/json'更稳妥 - 务必加
try/catch，用户可能从别处拖文本进来，JSON.parse会直接报错中断流程 - 移动端不支持原生 drag/drop，这个方案仅适用于桌面浏览器
购物车容器必须显式设置宽高并启用 drop 区域
如果购物车 <div> 没内容、没边框、没最小高度，它在视觉上是“空”的，dragover 很难命中，用户拖过去没反馈，drop 也不触发。
最简保障方式：
- 给购物车容器加
min-height: 60px和border: 2px dashed #ccc（提供视觉提示） - 确保它有明确的
display值（比如block或flex），避免因 CSS 折叠导致尺寸为 0 - 在
dragenter和dragover里临时加高亮类（如cart.classList.add('drag-over')），让用户知道“这里能接住”
另外注意：如果购物车用了 position: absolute 或被父容器 overflow: hidden 裁剪，拖拽时鼠标移出可视区就会意外触发 dragleave，导致高亮消失、体验断裂。
性能与兼容性要注意的几个实际点
小项目直接写事件监听没问题，但商品列表动态渲染时（比如 Vue/React 列表），用 addEventListener 绑定每个图片容易内存泄漏或重复绑定。更稳妥的做法是事件委托：
document.getElementById('product-list').addEventListener('dragstart', e => {
if (e.target.matches('img[draggable="true"]')) {
e.dataTransfer.setData('application/json', JSON.stringify({
id: e.target.dataset.id,
price: e.target.dataset.price
}));
}
});
- IE11 支持原生 drag/drop，但
dataTransfer.setData('application/json', ...)在 IE 中不生效，得降级用'text/plain'+ 字符串拼接 - Firefox 对
dragover阻止默认行为更严格，漏掉e.preventDefault()就一定没drop - 不要在
drop里直接操作 DOM 渲染购物车条目——先更新数据状态，再由框架重绘，否则 React/Vue 可能丢更新
真正卡住人的往往不是 API 不懂，而是拖放过程中的状态反馈缺失、跨浏览器行为差异、以及把业务逻辑和 DOM 事件耦合太死。
