如何将排序的jQueryUI排序列表存储在数据库中[重复]答案

【问题标题】：How to store sorted jQueryUI sorted list in database [duplicate]如何将排序的jQueryUI排序列表存储在数据库中[重复]
【发布时间】：2017-04-03 20:27:38
【问题描述】：

我已经使用 jqueryui 实现了一个拖放排序列表，如下例所示。

HTML

<ul id="sortable1" class="connectedSortable">
  <li class="ui-state-default">Item 1</li>
  <li class="ui-state-default">Item 2</li>
  <li class="ui-state-default">Item 3</li>
  <li class="ui-state-default">Item 4</li>
  <li class="ui-state-default">Item 5</li>
</ul>

<ul id="sortable2" class="connectedSortable">
  <li class="ui-state-highlight">Item 1</li>
  <li class="ui-state-highlight">Item 2</li>
  <li class="ui-state-highlight">Item 3</li>
  <li class="ui-state-highlight">Item 4</li>
  <li class="ui-state-highlight">Item 5</li>
</ul>

Javascript

 <script>
  $( function() {
    $( "#sortable1, #sortable2" ).sortable({
      connectWith: ".connectedSortable"
    }).disableSelection();
  } );
  </script>

我在下面创建了一个更新按钮。按下更新按钮后，我必须将重新排列的列表存储到数据库中。

但我不知道该怎么做，我需要一些建议，我不知道从哪里开始。

谢谢。

【问题讨论】：

为什么不给每个 LI 一个 ID，然后提取 ID 和文本以 JSON 格式发送到服务器。 ?
感谢您的快速回复，您能举例说明您的想法吗？
其实我找到了一个几乎相同标题的副本

标签： php jquery html jquery-ui

【解决方案1】：

使用单个项目列表，您可以这样做

<form>
<ul id="sortable1" class="connectedSortable">
  <li class="ui-state-default">Item 1<input type="hidden" name="sortorder[]" value="1" /></li>
  <li class="ui-state-efault">Item 2<input type="hidden" name="sortorder[]" value="2" /></li>
  <li class="ui-state-default">Item 3<input type="hidden" name="sortorder[]" value="3" /></li>
  <li class="ui-state-default">Item 4<input type="hidden" name="sortorder[]" value="4" /></li>
  <li class="ui-state-default">Item 5<input type="hidden" name="sortorder[]" value="5" /></li>
</ul>
</form>


$( "#sortable1" ).sortable({
    cursor: "move",
    items: "> li",
    update: function() {
        var neworder = $('#sortable1').parent('form').serialize();
        $.ajax({
            data: neworder,
            type: 'POST',
            url: 'updateportfolioorder.php'
        });
    }
});

【讨论】：