Question

I am working on a drag and drop layout tool for some customized PDF generation and I would like to be able to serialize my Div’s after they have been dragged and dropped using jQuery UI.

I have all of the code working except the serializing of the CSS of the elements – does anyone know of a plugin to do this before I write one?

Answer 1

Assuming you have html for sortable elements similar to this:

<ul id="sortable_list">
  <li id="sortable_item_1"> Item 1 </li>
  <li id="sortable_item_3"> Item 3 </li>
  <li id="sortable_item_4"> Item 4 </li>
  <li id="sortable_item_2"> Item 2 </li>
  <li id="sortable_item_5"> Item 5 </li>
</ul>

To serialize the sorted list, you need to first make the list sortable, and then call the serialize method on it:

<script>
  $(function() {
    $( "#sortable_list" ).sortable();
    var items_order = $( "#sortable_list" ).sortable('serialize'); // remember to make the list sortable before calling this
  });
</script>

To get the order on the server side (assuming you’re using PHP), you can send items_order as as a POST variable, and parse it:

parse_str($_POST['items_order'], $neworder);