GitLab CI/CD流水线编辑器在自部署版本中常借助jQuery UI的Sortable组件来实现变量列表的拖拽排序。不少团队在改造或二次开发该编辑器时会遇到一个具体故障：页面上把变量拖来拖去看着正常，但点保存之后，后台读出来的变量顺序还是老的。这个问题并不是GitLab核心逻辑的缺陷，而多出现在我们基于其前端模板做定制时，Sortable与表单提交机制没有接好。
问题原理：为什么拖拽后顺序没保存
jQuery UI Sortable的工作方式是在DOM层面重新排列<li>或者其它容器子元素的位置。它默认不会去修改任何<input>、<textarea>的值，也不会自动往FormData里塞一个表示顺序的字段。GitLab的变量编辑器如果原本是靠隐藏域或者API body里的数组顺序来持久化变量，那么仅仅依靠Sortable改变视图，提交时携带的数据自然没变。
另一个容易被忽略的点是事件时机。Sortable提供了stop、update等回调，但很多集成代码只在初始化时读取一次列表，后续不再刷新提交数据。再加上如果页面用了前端框架做状态管理，DOM顺序和框架内部数组是两套真相，拖完DOM后框架并不知道，保存时框架用自己的数组覆盖掉视图，造成“拖了白拖”的现象。
从网络层看，打开开发者工具的Network面板，在拖拽前后分别触发保存，对比请求体里的variables字段。如果顺序字符串没变，就证明是前端组装数据的问题；如果顺序变了但后端返回依旧老样子，那才是后端解析或数据库写入忽略了order。绝大多数定制项目落在前者。
前端修复方案：同步Sortable结果到提交数据
最直接的修法是给Sortable绑定stop事件，在事件里遍历当前DOM顺序，拼成逗号分隔的变量名串，写回一个隐藏的<input>。这样原生表单提交就能带上新顺序。下面是一段最简实现：
// 假设变量列表容器id为 variables-list
$('#variables-list').sortable({
stop: function(event, ui) {
var order = [];
$('#variables-list li').each(function() {
// data-name 是每个变量拖拽项上记录的变量名
order.push($(this).attr('data-name'));
});
// 隐藏域用来向后端传递顺序
$('#variables-order').val(order.join(','));
}
});
如果项目使用Vue或React包裹了编辑器，就不该直接拿jQuery去改DOM期望框架跟进。正确思路是用Sortable的回调去调用框架方法，例如Vue里用splice重排variables数组，让框架重新渲染列表。Sortable只负责捕获拖拽手势，数据真相始终在框架状态里，保存时直接提交状态数组即可。
还有一种情况是用ajax提交而非整页表单。此时要在beforeSend或提交函数里用$('#variables-list').sortable('toArray')拿到最新id序列，再合并进请求参数。注意toArray依赖每个子项有id或者item属性配置，提前规范好DOM结构能少写很多兼容代码。
后端对接与验证：确保顺序被真正写入
前端传了order不代表后端一定用。GitLab的变量API通常以数组接收，若自写接口，要显式按传入顺序重建变量对象，而不是依赖数据库默认排序。下面用伪代码展示一个安全的接收逻辑：
// 接收前端 order 字符串，如 "token,url,debug"
$order = explode(',', $_POST['variables_order']);
$rawVars = json_decode($_POST['variables'], true);
$sorted = [];
foreach ($order as $name) {
if (isset($rawVars[$name])) {
$sorted[] = $rawVars[$name];
}
}
// 按 $sorted 写入 CI 变量配置
save_ci_variables($sorted);
验证环节建议写一条端到端用例：用脚本模拟拖拽后提交，断言数据库里变量的position字段或数组索引符合预期。手动验证时，除了看页面顺序，还要进GitLab的CI配置原始文件（如.gitlab-ci.yml中的variables段）确认顺序落地，因为某些版本编辑器界面和底层存储有缓存层。
最后提醒，若编辑器是多用户协作场景，保存前最好加一个版本号或乐观锁。Sortable拖拽体验虽好，但并发保存可能让后提交者用旧顺序覆盖新顺序。把order和业务数据一起做冲突检测，才能在生产环境安稳运行。
GitLab_CI/CDjQuery_UI_Sortable拖拽排序保存修改时间：2026-08-14 07:06:25