How to obtain jQuery UI Sortable item positions? - jquery-ui-sortable

Question

I have 2 jQuery UI Sortable lists. Codes are as follow:
<div class="chapter_container">
<p>Available Chapters</p>
<ul id="sortable_available">
<li id="t1">Title 1</li>
<li id="t2">Title 2</li>
<li id="t3">Title 3</li>
<li id="t4">Title 4</li>
</ul>
</div>
<div class="chapter_container">
<p>Selected Chapters</p>
<ul id="sortable_selected">
</ul>
</div>
For the JS, I use:
jQuery(function() {
jQuery("#sortable_available, #sortable_selected").sortable({
connectWith: ".chapter_container ul"
});
jQuery("#sortable_selected").on("sortstop", function(event, ui) {
console.log(ui.position);
});
jQuery("#sortable_available, #sortable_selected").disableSelection();
});
I can only obtain the position of item moved via sortstop event. How can I obtain the orders of items in both lists?
Here is the JSFiddle

Answer 1

Have you looked at the refreshPositions method? If you make a call to this method, you can query the children from the returned object.
Updated Fiddle
jQuery(function() {
jQuery("#sortable_available, #sortable_selected").sortable({
connectWith: ".chapter_container ul"
});
jQuery("#sortable_available").on("sortstop", function(event, ui) {
//Clear the existing content.
jQuery('#debug').html('');
//Call refreshPositions and store the children in a local variable.
var items = jQuery(this).sortable("refreshPositions").children();
for (var i = 0; i < items.length; i++) {
//I'm using javascript to get the required values, but you can use jQuery if you so desire.
jQuery('#debug').html(jQuery('#debug').html() + items[i].innerHTML + ', Top: ' + items[i].offsetTop + ', Left: ' + items[i].offsetLeft + '<br/>');
}
});
jQuery("#sortable_available, #sortable_selected").disableSelection();
});
Moving the second item to the first position will output the following:
Title 2, Top: 115 Left: 18
Title 1, Top: 152 Left: 18
Title 3, Top: 189 Left: 18
Title 4, Top: 227 Left: 18
$(".selector").sortable("refreshPositions").children(); will return an array.