本文介绍如何利用jquery ui sortable插件将可拖拽、可编辑的无序列表（`
- `）集成到html表单中，并在提交时将其项作为数组参数传递至后端。
在标准HTML中，<ul> 和 <li> 本身不具备表单控件语义，无法直接通过 <form> 提交数据。但通过结合 jQuery UI 的 sortable() 插件，我们可以将 <li> 元素转化为用户可拖拽排序、动态增删的交互式列表，并在表单提交前将其内容序列化为数组，再以隐藏字段或自定义参数形式提交。
✅ 基础实现步骤
-
引入依赖：
需加载 jQuery 和 jQuery UI（含 sortable 模块），推荐使用 CDN：<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script> <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/ui-lightness/jquery-ui.css">
-
构建可排序列表与表单：
<form id="listForm" action="/submit" method="POST"> <ul id="sortableList" class="ui-sortable"> <li contenteditable="true">苹果</li> <li contenteditable="true">香蕉</li> <li contenteditable="true">橙子</li> </ul> <input type="hidden" name="items" id="itemsInput"> <button type="submit">提交列表</button> </form> -
初始化 Sortable 并同步数据：
$(function() { $("#sortableList").sortable({ update: function() { // 拖拽顺序变更后自动更新隐藏字段 syncListToInput(); } }); // 支持回车新增项（可选增强） $("#sortableList").on("keypress", "li", function(e) { if (e.key === "Enter") { e.preventDefault(); const $newLi = $("<li contenteditable='true'>新项目</li>"); $(this).after($newLi); $newLi.focus(); } }); // 表单提交前确保最新状态 $("#listForm").on("submit", function() { syncListToInput(); }); }); function syncListToInput() { const items = $("#sortableList li").map(function() { return $(this).text().trim(); }).get().filter(text => text.length > 0); // 过滤空项 $("#itemsInput").val(JSON.stringify(items)); // 序列化为 JSON 字符串 }
⚠️ 注意事项
- contenteditable="true" 仅提供基础编辑能力，不校验输入；如需更健壮的编辑体验（如防 XSS、富文本控制），建议替换为 <input> 或专用编辑组件。
- 后端需解析 items 字段（例如：JSON.parse(req.body.items)），注意处理空值、编码及安全过滤。
- 若需支持多层级或复杂结构（如带ID、状态标记），可在 <li> 中添加 data-id 或 data-props 属性，并在 syncListToInput() 中一并提取。
- jQuery UI Sortable 不再积极维护，生产环境可考虑现代替代方案（如 SortableJS），但 API 设计思路一致：监听排序/编辑事件 → 序列化 → 注入表单。
通过上述方式，你就能将语义化的 <ul><li> 转变为真正可用、可提交的动态表单控件，兼顾用户体验与后端兼容性。
立即学习“前端免费学习笔记（深入）”；
