Question

While there are plenty of answers regarding draggable HTML elements using jQuery, I’d like for the user to be able to specifically reorder items in a list and then have the ranking for each object (i.e. 1 for top, 3 for bottom) saved as a normal form <input>.

I began tinkering with some Javascript and looking at plenty of different resources (including this good one). However, they only detail how to move things around, not how to store the actual positions to an <input> object. Any help would be much appreciated!

IDEALLY:
<input name="item-a-ranking" type="text">
-- the javascript then determines what text is "typed in" (i.e. 1, 2, or 3) for each.

Answer 1

You could use the JQueryUI project, widget Sortable : http://jqueryui.com/sortable/

There is a method called serialize to retrieve the element order.

EDIT

You could also use the toArray method to retrieve an array of your element. Then loop through your array to format in a specific format if you need.

EDIT 2

Here is an example : http://jsfiddle.net/yg4n6/7/

$('#btn').click(function() {
    var dataItem = $("#sortable").sortable("serialize");
    alert(dataItem);

    $.ajax({
        url: 'save-sorting-position.php',
        data : dataItem,
        success: function(data) {                
            alert('Positions saved');
        }
    });
});

The idea is to call a php page to store the item position into your database.

Go through the $_GET ($_POST or $_REQUEST) array to retrieve your data :

save-sorting-position.php :

<?php 
    $arr = unserialize($_REQUEST["item"]); 
    foreach($arr as $index => $position)
    {
        //store the position here
    }
?>