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">）必须监听 <code>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 里解析：

  

  Wechat HTML Publisher

  直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

  下载

  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> 没内容、没边框、没最小高度，它在视觉上是“空”的，<code>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 事件耦合太死。