I always find that if I can avoid using JavaScript for a task, it often pays to do so. At least at the start, because it means your system can be used by more people. Having a script-disabled fallback is of benefit in terms of accessibility, and generally helps guide you in a way of building applications that stick to a reliable, easy to understand baseline.
I'm assuming that as you know PHP, you'll have a good understanding of HTML too.
Non-JavaScript solution
Basically all you'd need do as a simple solution is to render hidden inputs as part of the sortable markup. These inputs would have to have to be named with index-less array notation i.e. name="row[]" so that the HTML order is honored when the data is presented server-side.
The inputs would then be responsible for keeping the meaningful information stored within the HTML. You could PHP's serialize(), or json_encode() to deal with complex values, or — if you have access to the data as a set or list on the server-side i.e. in a database or session — it would be *preferable to just store unique IDs.
The hidden inputs would then be sorted along with the rest of the HTML.
*preferable : Why would storing just IDs be better? Not only will you be sending less data with simple IDs, less interference can occur if you end up with a malicious user. Someone who may attempt to post unwanted information to your server. You should always test and clean the data received from the outside world to your server, this is just easier to do when dealing with simple array key offsets — rather than complex data structures.
Slight changes to what you have already
In order for this to work you'll need to wrap your sortable list with a form tag and a **submit button, or at least some call-to-action that triggers the form's submit. Then when submit is called — without having to leverage JavaScript at all — the destination of the form will receive your data in the correct order.
<form id="sorted" action="destination.php" method="post">
<section>
<ul class="sortable grid">
<?php
$i=1;
foreach ($werkbladen as $werkblad) {
$thumbnail = "../groepen/".$werkblad['werkblad'][path].$werkblad['werkblad'][thumbnail];
/// I've used thumbnail as my stored data, but you use `$i` or anything you want really.
$input = '<input type="hidden" name="row[]" value="' . $thumbnail . '" />';
$image = '<img src="' . $thumbnail . '" width="139" height="181" />';
echo '<li id="'.$i.'">' . $input . $image . </li>';
$i++;
}
?>
</ul>
</section>
</form>
**submit button : If I were to be generating a PDF, I wouldn't trigger its generation after every sort event. You would really want the user to request via a call-to-action because PDF generation is usually quite heavy process. Not to mention you waste bandwidth and processing time if the user hasn't finished with their ***ordering.
Then on the PHP side you'd get the row information using:
$_POST['row']; // <-- this should be a sorted array of thumbnail paths.
***ordering : True, you could put a timeout delay on the sortupdate event, so as not to trigger after every sort. But my reasons for implementing a call-to-action are not just based on minimizing the work your server has to do. It is just a good idea to implement a call-to-action by default, and then progressively hide it away for users that either don't want or need it.
Progressively enhanced
If you really did want an up-to-the-last-sort-interaction preview, then I would still implement the HTML only solution above, but progressively enhance with JavaScript to add the extra abilities. You can do this using an AJAX/$sortable solution that has already been commented about. However because you now have a form, you could use jQuery's .serialize() method. This is designed to take a form and generate the data that it would have submitted as a string of a name-value pairs. This "URL" string can then be POSTed or GETed back to the server in a number of ways.
$('.sortable').sortable().bind('sortupdate', function() {
var data = jQuery('form#sorted').serialize();
console.log(data);
/// there are a number of ways you can use this data
/// send it via AJAX, open a new tab, open a pop-up window,
/// open a preview iframe... even encode it using semaphore
/// and create a canvas animation of waving flags.
});
