使用 jQuery sortable() 重新排序元素并在 PHP 中输出正确的顺序答案

【问题标题】：Reordering elements with jQuery sortable() and output correct order in PHP使用 jQuery sortable() 重新排序元素并在 PHP 中输出正确的顺序
【发布时间】：2016-10-30 03:50:57
【问题描述】：

我有一些元素在屏幕上进行排序。因此，您可以将元素上下拖放以在屏幕上重新排列它们。我需要做的是能够保存这些元素所在的顺序，然后在我的 PHP 文件中，获取元素的顺序，并相应地回显 html。

我一直在兜圈子，试图找出最好的方法，但似乎无法弄清楚。

我曾想过将值保存在隐藏输入中，这些输入在重新排序时会发生变化，然后在 PHP 端调用所有输入的值并以这种方式对它们进行排序，但这似乎太草率了。

编辑：这是我的选择器代码...sorted 中没有任何内容被注销。

$( ".container" ).sortable({
            placeholder: "ui-state-highlight",
            handle: ".handle",
            update: function(e, ui) {
                var sorted = $( ".container" ).sortable( "serialize" );
                console.log(sorted);
                //Ajax the data to the server
                //$.get('sort.php', order, function(data, textStatus, xhr) {});
            }

    });

我如何构建我的模板：

$template = "<div class='title'>title class</div>";
$template .= "<div class='summary'>summary class</div>";
$template .= "<div class='rating'>rating class</div>";
$template .= "<div class='conclusion'>conclusion class</div>";

因此，如果我从可排序变量返回订单，我该如何决定在何时何地构建我的模板。可排序变量按它们保存的顺序返回标题、总结评分、结论。

【问题讨论】：

看看这些元素的代码会有所帮助

标签： javascript php jquery jquery-ui

【解决方案1】：

您不需要隐藏输入。 Sortable() 有一个函数 serialize，它是为您的需要而设计的。（将订单存储在服务器上）

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>jQuery UI Sortable - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <style>
    #sortable {
      list-style-type: none;
      margin: 0;
      padding: 0;
      width: 60%;
    }
    #sortable li {
      margin: 0 3px 3px 3px;
      padding: 0.4em;
      padding-left: 1.5em;
      font-size: 1.4em;
      height: 18px;
    }
    #sortable li span {
      position: absolute;
      margin-left: -1.3em;
    }
  </style>
  <script>
    $(function() {
      $("#sortable").sortable({
        update: function(e, ui) {
          var order = $('#sortable').sortable('serialize');
          console.log(order);
          //Ajax the data to the server
          //$.get('sort.php', order, function(data, textStatus, xhr) {});
        }
      });
      $("#sortable").disableSelection();
    });
  </script>
</head>

<body>

  <ul id="sortable">
    <li id="item_1" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
    <li id="item_2" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
    <li id="item_3" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
    <li id="item_4" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
    <li id="item_5" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
    <li id="item_6" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
    <li id="item_7" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
  </ul>


</body>

</html>

然后要获得订单，您的sort.php 应该是这样的：

foreach (  $_GET['item'] as $item => $position) {
    echo $item.' at '.$position;
}

【讨论】：

我的订单没有得到任何回复... :( 这只是一个空白的 console.log。我将使用选择器代码更新我的原始帖子。
没关系，我猜他们的 ID/类需要下划线。对不起。
没问题。是的，它们需要下划线和序列号。希望它对你有用。
成功了，谢谢。所以我现在的问题是，如果我在 PHP 中动态构建模板（参见上面的代码），我将如何占据这些位置并按照它们应该进入的顺序构建它们
您如何在服务器上存储数据？在 MySQL 或文件中或...？请记住，cmets 不适合进行冗长的讨论。