可拖动的HTML <form>输入</form>

Question

虽然有很多关于使用jQuery的可拖动HTML元素的答案，但我希望用户能够专门重新排序列表中的项目，然后对每个对象进行排名（即顶部为1， 3为底部）保存为普通表格<input> 。

我开始修改一些Javascript并查看plenty of different resources（包括this good one）。但是，它们仅详细说明如何移动，而不是如何将实际位置存储到<input>对象。任何帮助将不胜感激！

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

您可以使用JQueryUI项目，窗口小部件Sortable：http://jqueryui.com/sortable/

有一个名为serialize的方法来检索元素顺序。

修改

您还可以使用toArray方法检索元素数组。然后循环遍历您的数组，以便在需要时以特定格式进行格式化。

编辑2

以下是一个示例：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');
        }
    });
});

想法是调用php页面将项目位置存储到数据库中。

浏览$_GET（$_POST或$_REQUEST）数组以检索您的数据：

save-sorting-position.php：

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