jQuery UI sortable - sorting images

I've just implemented the jQuery UI sortable plugin for a set of images. The markup I have is as follows:开发者_如何学Python

<ul id="images" class="ui-sortable">
  <li id="7884029"><img src="/images/member/4698568/7884029_t.jpg" alt="" /></li>
  <li id="7379458"><img src="/images/member/4698568/7379458_t.jpg" alt="" /></li>
  <li id="1704208"><img src="/images/member/4698568/1704208_t.jpg" alt="" /></li>
  <li id="1750715"><img src="/images/member/4698568/1750715_t.jpg" alt="" /></li>
  <li id="4364912"><img src="/images/member/4698568/4364912_t.png" alt="" /></li>
</ul>

<script type="text/javascript">
/*<![CDATA[*/
jQuery(function($) {
  jQuery('#images').sortable({'delay':'100'});
});
/*]]>*/
</script>

The LI id is the 'name' column in the DB table - I prefer not to display the ID column.

Now my question is how do I capture the sorting? I understand this would be an AJAX request but I have no idea how to do it. I have set up a sort_order column in my DB table and I am using PHP as my scripting language. I could do with a code example.

EDIT:

Ideally I prefer if the sort order is applied upon moving an item, i.e. I do not want to enclose it all in a form.

Basically, do this:

First, change your items' id format to the underscored format expected by sortable:

<li id="image_7884029"><img ...
<li id="image_7379458"><img ...

Then, use sortable's serialize method in its stop event:

... // Within your sortable() setup, add the stop event handler:
stop:function(event, ui) {
  $.ajax({
    type: "POST",
    url: path/to/your/ajax/reorder.php,
    data: $("#images").sortable("serialize")
  });
}
...

When you use $("#images").sortable("serialize"), sortable's serialize method will go through the children of #images, i.e. all your li elements, and turn all the ids it finds (image_7884029, image_7379458, etc.) into a list of items like image[]=7884029&image[]=7379458..., in the order they now appear in the list, after sorting (because you're calling it from stop()). Basically it works similar to how an array of checkboxes gets sent when posting a form.

You can then pick this up in your server-side "reorder.php", to assign new values to your sort_order column:

$items = $_POST['image'];
if ($items) {
  foreach($items as $key => $value) {           
    // Use whatever SQL interface you're using to do
    // something like this:
    // UPDATE image_table SET sort_order = $key WHERE image_id = $value
  } 
} else {
  // show_error('No items provided for reordering.');
}

And you're done.

I've just done this. Here's how I did it:

Surround the #images element with a form, action pointing to your ajax script. Alongside each image, have a hidden input field eg:

When you re-order the images, capture the jQuery sortable update and stop events, similar to this:

$("#images").sortable({

  // configuration
  delay: 100,
  items: 'li',
  update: function(event, ui) {

    // Update order indexes
    updateOrderIndexes();
  },
  stop: function(event, ui) {

    // fire off the update method
    postUpdateOrder();
  }
});

function updateOrderIndexes()
{
  // Update the order index on each item
  var orderIndex = 1;
  $("#images li").each( function() {

    $(this).find("input[type=hidden]:first").val(orderIndex);
    orderIndex++;
  })    
}

In the postUpdateOrder() function which you'll need to write, you can use jQuery's $.post function to carry out an AJAX post request back to the server. Each field will then be available in your PHP script's $_POST array, named as per the ID, with a value of the new index. Validate as appropriate, save the new values, and send an OK/error back to the browser.

Update based on your edit requirement of not enclosing it in a form, you could still do this by eg adding a class to all your order-related input fields, putting the AJAX url into your Javascript somewhere eg var myRoute = '/some/path/to/script.php' and construct the data to send to the server yourself based on $("input.myclass").each()-style code with jQuery. Essentially all I use the input fields for is data storage client-side - you can accomplish this however you want.

Just to clarify as well, you don't need to have a submit button etc for a form, it just makes it easier to serialize the data to send to your AJAX script - this is fired automatically when you stop dragging an item if you use the above code.