在Codex中实现拖拽排序需手动注入JS并配置CSS：为列表项加draggable="true"，父容器设data-cdx-draggable="list"；监听dragstart、dragover、drop事件；用insertBefore重排DOM，并添加cdx-list--dragging等样式提供视觉反馈。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
在Codex中实现拖拽排序交互，需要绕过其默认禁用DOM操作的限制，通过注入自定义JavaScript并配合CSS样式控制拖拽反馈，才能让列表项支持鼠标拖动并实时更新顺序。
启用Codex组件的可拖拽属性
打开Codex文档页面，在目标列表容器（如<ul class="cdx-list">）的HTML源码中，为每个列表项添加draggable="true"属性。Codex本身不提供drag属性绑定API，必须手动插入——不加这句，后续所有JS监听都将无效。
在列表父容器上添加data-cdx-draggable="list"标识，用于后续JS精准定位作用域，避免误触其他页面元素。
注入拖拽事件监听脚本
方法一：通过浏览器控制台临时注入（调试用）
复制以下代码，粘贴进开发者工具Console并回车执行：
document.querySelectorAll("[data-cdx-draggable='list'] > *").forEach(item => { item.addEventListener("dragstart", e => { e.dataTransfer.setData("text/plain", item.dataset.index || ""); }); });
方法二：持久化注入（生产环境适用）
将脚本封装为IIFE，通过Codex插件机制或页面底部<script>标签加载；注意必须等Codex渲染完成后再执行，建议用MutationObserver监听.cdx-list出现。
通过本地 Codex 或 OpenClaw OAuth 凭证直接调用 ChatGPT/Codex Responses 的 image_generation 工具来生成或编辑光栅图像，然后保存
【必须等待列表DOM完全挂载，否则querySelectorAll返回空节点】
实现排序逻辑与视觉反馈
第一步：监听dragover事件，阻止默认行为以允许放置
第二步：在drop事件中获取被拖动项的原始位置索引和目标位置，调用Codex的moveItem方法（若存在）或直接操作DOM节点顺序——Codex未暴露该API时，需用insertBefore手动重排。
第三步：添加CSS类cdx-list--dragging到父容器，并为当前拖动项设置opacity: 0.5和transform: scale(0.95)，视觉反馈比纯JS逻辑更重要，用户需要明确感知“正在拖”和“可放位置”。
这一步操作起来很简单，直接把CSS规则追加到页面<style>块里就行，但漏掉会让人误以为拖拽没生效。
