可拖动的 HTML <form> 输入

Question

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

我开始修补一些 Javascript 并查看大量不同的资源（包括这个好的资源）。然而，它们只详细说明了如何移动物体，而不是如何将实际位置存储到<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/

有一种称为序列化的方法来检索元素顺序。

编辑

您还可以使用该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) 数组检索数据：

保存排序位置.php ：

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