Joshua Terrill Joshua Terrill - 5 months ago 36
PHP Question

Reordering elements with jQuery sortable() and output correct order in PHP

I have some elements that I have sorting on the screen. So you can drag and drop elements above and below each other to reorder them on the screen. What I need to do, is be able to save the order that these elements are in, and then on my PHP file, get the order of the elements, and echo the html out accordingly.

I've been going around in circles trying to figure out the best way to do this, and can't seem to figure it out.

I thought about saving values in hidden inputs that get changed when things are reordered, and then calling up all of the inputs's values on the PHP side and ordering them that way, but it seems super sloppy.

Edit: here's my selector code... nothing gets logged out in

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) {});
}

});

Answer

You don't need hidden inputs. Sortable() has a function serialize which was made precisely for what you need. (Storing the order on the server)

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

Then to get the order, your sort.php should have something like this:

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