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

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 序列化为 form/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>

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

jQuery UI Sortable without Ajax (submit order-data using regular form)

html

jquery

jquery-ui-sortable