无需Ajax的jQuery UI可排序（使用常规格式提交订单数据）

Question

我正在使用jQuery UI Sortable，我想使用常规表单提交项目的顺序（因此，我希望不使用Ajax，而是使用带有提交按钮的表单-当我提交表单时，它将发送订单数据发送到服务器端）。

目前，我有：

<form id="frmExample" method="post">
    <ul id="sortable">
        <li id="task_1" class="ui-state-default">1</li>
        <li id="task_2" class="ui-state-default">2</li>
        <li id="task_3" class="ui-state-default">3</li>
        <li id="task_4" class="ui-state-default">4</li>
    </ul>

    <button id="btnSubmit" type="submit">Submit</button>
</form>

<script>
    $sortable.sortable({
        update: function(event, ui) {
            var $data = $(this).sortable('serialize');

            // now what? :)
        }
    });

    $sortable.disableSelection();
<script>

也许可以使用serialize method来完成，因为在文档中指出它是“ 将可排序项目的项目ID序列化为表单/ ajax可提交字符串。”...但是我不知道如何。还是有更好的方法（不使用serialize方法）？

请注意，我想将此作为数组提交。例如，提交后，在后端（PHP / Laravel方面）看起来像：

// Result of $_POST:
// array(
//     'positions' => array('task_3', 'task_2', 'task_4', 'task_1')
// )

Answer 1

这里是一个基本示例，仅针对该示例代码片段，暂停了表单的提交。您的代码将不会是e.preventDefault()。

$(function() {
  var $sortable = $("#sortable").sortable({
    update: function(event, ui) {
      var $data = $(this).sortable('toArray');
      $("#position").val(JSON.stringify($data));
    }
  });
  $sortable.disableSelection();
  $("#position").val(JSON.stringify($sortable.sortable("toArray")));
  $("#frmExample").submit(function(e) {
    e.preventDefault();
    console.log("Form Submit, position:", $("#position").val());
  });
});

form ul {
  list-style: none;
  padding: 0;
  width: 150px;
}

form ul li {
  padding: .2em;
  margin-bottom: -1px;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<form id="frmExample" method="post">
  <ul id="sortable">
    <li id="task_1" class="ui-state-default">Item 1</li>
    <li id="task_2" class="ui-state-default">Item 2</li>
    <li id="task_3" class="ui-state-default">Item 3</li>
    <li id="task_4" class="ui-state-default">Item 4</li>
  </ul>
  <input type="hidden" name="position" id="position" />
  <button id="btnSubmit" type="submit">Submit</button>
</form>