jQuery code to serialize CSS of elements in a div?

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?

can try this http://stackoverflow.com/a/9609989/1175966 – charlietfl Mar 10 '12 at 15:36 — charlietfl, Mar 10 '12 at 15:36

score 0 · Accepted Answer · answered Jun 08 '12 at 17:12

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

jQuery code to serialize CSS of elements in a div?

1 Answers1