<ul id="sortable">
  <% for pp in @published_pages %>
    <li data-id="<%= pp.id %>" data-name="<%= pp.name %>"  class="ui-state-default"><%= pp.name %></li>
  <% end %>
</ul>
<pre id="serialize_output2"></pre>
<% content_for :footer_scripts do %>
<%= javascript_include_tag 'jquery-sortable' %>
  <script type="text/javascript">
    $(document).ready(function() {
      $( "#sortable" ).sortable({
        placeholder: "ui-state-highlight"
      });
      $( "#sortable" ).disableSelection();
      /*
      var group = $("ol.sorting_pages").sortable({
        group: 'sorting_pages',
        delay: 500,
        onDrop: function ($item, container, _super) {
          var data = group.sortable("serialize").get();

          var jsonString = JSON.stringify(data, null, ' ');

          $('#serialize_output2').text(jsonString);
          _super($item, container);
        }
      });
      */
    });
  </script>
<% end %>
