Question

我有一些我在屏幕上排序的元素。因此，您可以将元素上下拖放，以便在屏幕上重新排序。我需要做的是，能够保存这些元素所在的顺序，然后在我的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>";

因此，如果我从可排序变量返回订单，我该如何决定何时何地构建我的模板。可排序变量按照保存顺序返回标题，摘要评级，结论。

Answer 1

您不需要隐藏的输入。 Sortable()有一个函数serialize，它是根据您的需要精确制作的。（在服务器上存储订单）

＆＃13;

<!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>

＆＃13;

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

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

使用jQuery sortable（）重新排序元素并在PHP

1 个答案: