Question

我实施了一个拖累和放大器使用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>

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

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

谢谢。

Answer 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'
        });
    }
});

如何在数据库中存储已排序的jQueryUI排序列表

1 个答案: