javascript - 将 jQueryUI 可排序列表与表单一起使用

Question

我正在使用 jQueryUI 创建一个可排序的列表，并且 UI 部分工作得很好，因为我可以根据需要在网页上对项目进行排序。不过，我无法弄清楚排序列表的顺序是如何包含在 POST 中的。我是 javascript 的菜鸟，所以如果这真的很简单，请原谅我。

这是我的 html 的相关部分:

<script type="text/javascript">
  google.load("jquery", "1");
  google.load("jqueryui", "1");
  function OnLoad(){
    $( "#sortable" ).sortable({ axis: "y", containment: "#ballot", scroll: false });
    $( "#sortable" ).disableSelection();
  }
  google.setOnLoadCallback(OnLoad);
</script>

[...]

<form method="POST" action="/vote">
<input type="hidden" name="key" value="{{ election.key }}">
<input type="hidden" name="uuid" value="{{ uuid }}">
<div id="ballot" class="center">
<ol id="sortable" class="rankings">
  <li class="ranking">Jamie</li>
  <li class="ranking">Joanie</li>
  <li class="ranking">Morley</li>
  <li class="ranking">Frank</li>
  <li class="ranking">Larry</li>
</ol>
</div>
</form>

如何在 POST 中编码 Jamie、Joanie、Morley、Frank 和 Larry 的顺序？

Answer 1

您可以在可排序对象上使用方法.serialize:http://docs.jquery.com/UI/Sortable#method-serialize

$( "#sortable").sortable('serialize') 将为您提供一个可提交的项目数组。如果您不使用 ajax，只需将其分配给输入框即可。或者如果使用 ajax，只需将它传递到您的数据数组中

编辑 这里的例子:http://jsfiddle.net/jomanlk/KeAer/2/

正如 jquery 文档所指出的，要使其正常工作，您的元素需要具有 set_number 形式的 ID(例如 rank_1、rank_2)。所以我修改了你的 HTML

只需去掉表单中的return false，序列化后的值就会设置到表单提交时的输入框