展开本页目录
开始前准备什么
- Chrome/Edge 等 Chromium 浏览器及 Claude in Chrome 扩展 >=1.0.36；以实际文档支持为准。
- 当前直接集成要求 Claude 订阅账号 Pro/Max/Team/Enterprise 登录；API key、setup-token 或第三方供应商不等价，WSL 不支持。
- 只在本地虚构页面操作；若原生浏览器不能完成目标拖拽，明确记录失败，不通过注入 JS 伪造拖拽成功。
- 打开六卡本地练习页
- 核对 Chrome 原生集成门槛
- 让原生浏览器执行一次真实拖拽
- 刷新并记录错误样稿丢失顺序
- 只修加载与稳定 ID 恢复
- 重复拖拽并刷新验收
- 保留两类执行证据
原创输入、提示词、原生配置、参考源码、实际结果和验收说明；不含模型账号或运行缓存。
按独立目录运行，原生代理会话需由自己另行执行。
1. 打开六卡本地练习页
在解压目录运行 python3 -m http.server 4384 --bind 127.0.0.1，访问 app.html?mode=broken。六张 P1–P6 SVG 均为本站原创编号图；页面直接显示 DOM 顺序和 localStorage 中的顺序。
2. 核对 Chrome 原生集成门槛
Claude Code 的 Chrome 集成需要支持的 Chromium 浏览器与 Claude in Chrome 扩展，当前文档要求扩展至少 1.0.36 和直接订阅登录。API key、setup-token 或第三方供应商不等价，WSL 也不能假定可用。
3. 让原生浏览器执行一次真实拖拽
在已连接的 Claude Code Chrome 会话中要求把 P6 拖到 P2 前，读取卡片 data-id，而不是只看图片位置。让代理使用真实页面交互；若目标拖拽做不到，记录能力边界，不用注入 JS 直接改数组伪造操作。
4. 刷新并记录错误样稿丢失顺序
拖动后应该是 P1/P6/P2/P3/P4/P5。刷新 broken 模式，DOM 会回到初始顺序，而存储仍保留新顺序，说明错误发生在恢复阶段；保存刷新前后的真实浏览器截图。
5. 只修加载与稳定 ID 恢复
切到 app.html?mode=fixed，检查首次加载从 photo-order 回读稳定 ID，drop 时写入同一键。不要按数组下标替代 ID，也不要通过每次随机重排让截图看起来变化。
本地练习命令
python3 -m http.server 4384 --bind 127.0.0.16. 重复拖拽并刷新验收
在 fixed 模式重新拖动 P6 到 P2 前，刷新后读取实际 DOM 与存储，两边都必须保留目标顺序。本站使用 Playwright 的真实拖拽事件运行参考页，并记录 dragstart/drop，而没有运行 Claude Chrome 会话。
7. 保留两类执行证据
把自己的 Claude 会话/GIF 与本站 browser-result.json 分开放；前者证明产品实际操作，后者只证明原创练习页和修复参考。不要以平台连接成功替代拖拽与持久化验收。
怎样确认已经完成
- 真实拖拽事件与刷新后的 DOM/存储应能按 README 在独立目录重现。
- 旧文从录屏重建页面或验证表单必填；本题用已存在页面检验真实拖拽、稳定 ID 和刷新持久化，不以截图生成代码为产物。
- 目标代理真实结果须另存；人工参考、原生会话和官方示例分别识别。
常见问题
AI 能真的拖动图片卡片检查排序吗？
在已连接的 Claude Code Chrome 会话中要求把 P6 拖到 P2 前，读取卡片 data-id，而不是只看图片位置。让代理使用真实页面交互；若目标拖拽做不到，记录能力边界，不用注入 JS 直接改数组伪造操作。
拖完顺序刷新就没了，让 Claude 怎么查？
在 fixed 模式重新拖动 P6 到 P2 前，刷新后读取实际 DOM 与存储，两边都必须保留目标顺序。本站使用 Playwright 的真实拖拽事件运行参考页，并记录 dragstart/drop，而没有运行 Claude Chrome 会话。
本题哪些结果已经实际运行？
已运行的是真实拖拽事件与刷新后的 DOM/存储。原生功能操作按官方文档编排，目标代理未调用；英文检索可用“Claude Code Chrome drag reorder persistence browser test”定位对应术语，但这不是搜索量或热榜声明。