Question

I have several li floating left, I know that I can identify the ID of the “next” li by using:

$("li").live("click",function(e) {
    alert($(this).next("li").attr('id'))
});

When you click an li it will display the ID of the next li.

But how do you display the ID of the next li’s, next li?

For example,

If I have:

1 2 3 4 5 6

And I move the number 2 to make:

1 3 4 5 2 6

How do I return that the “next” value to 1 has changed to 3, the “next” value to 2 has changed to 6 and the “next” value to 5 has change to 2?

In other words, how will I know what numbers “next” value has changed?

I am asking because I need to be able to identify these values and store them in a database so that I can load the page and echo the li’s in the correct floated order using PHP if they are rearranged. I will be using ajax of course to send these values to a PHP page.

Here is the document:

http://jsfiddle.net/TSM_mac/uuHsg/2/

Also, I am using alert(something…) to display the results.

Is there any type of “onrelease” or similar command that will only display the values after the objects are rearranged?

Thanks tons,

taylor

Answer 1

I’m not completely clear on what you’re trying to accomplish, but the sortable widget does have a change event handler that you can tap into to determine when a sortable element’s position in the DOM has changed:

$("#sortable").sortable({
    change: function() { ... }
});

I’ve worked on a few projects where we have to allow the user to sort items, saving that sort to the database. I would let your server-side code handle that logic and pass up the new order (either by listening to the change event or the stop event).