Javascript 表单提交时的JQuery UI可排序排序

图像是从数据库加载的。 我想使用JQuery UI sortable对图像顺序进行排序，并将数据保存在表单submit上

<script type="text/javascript">
    $(function() {
        $( "#sortable" ).sortable({
            placeholder: "ui-state-highlight",
            cursor: 'crosshair'
    });
        $( "#sortable" ).disableSelection();
});
</script>

$（函数（）{
$（“#可排序”）。可排序({
占位符：“ui状态突出显示”，
光标：“十字线”
});
$（“#可排序”）.disableSelection（）；
});

---

根据我的想法，这里有一个基本的解决方案

创建一个隐藏的输入并将其顺序存储到其中

<script type="text/javascript">
    $(function() {
        $( "#sortable" ).sortable({
            placeholder: "ui-state-highlight",
            cursor: 'crosshair',
            update: function(event, ui) {

      var Order = $("#sortable").sortable('toArray').toString();
      $('#order').val(Order);
 }
    });
        $( "#sortable" ).disableSelection();
});
</script>

<form action="" method="post">
<ul id="sortable" style="width: 524px;">
    <li id="00001" class="ui-state-default"><img src="00001.jpg" width="100" height="90" /></li>
    <li id="00002" class="ui-state-default"><img src="00002.jpg" width="100" height="90" /></li>
    <li id="00003" class="ui-state-default"><img src="00003.jpg" width="100" height="90" /></li>
    <li id="00003" class="ui-state-default"><img src="00004.jpg" width="100" height="90" /></li>  
</ul>
<div style="clear:both;"></div>
<input name="order"  type="hidden" />
<input name="Submit" value="RE-ORDER" type="submit" />
</form>

$（函数（）{
$（“#可排序”）。可排序({
占位符：“ui状态突出显示”，
光标：“十字线”，
更新：功能（事件、用户界面）{
变量顺序=$（“#可排序”）.sortable（'toArray'）.toString（）；
$（'订单'）.val（订单）；
}
});
$（“#可排序”）.disableSelection（）；
});

---

现在，您可以从

order

获取订单。每次排序时，使用sortable中的

update:function（）{}

将值更新到隐藏的输入字段。这是我的代码，每次排序时都会更新隐藏的输入。提交表单时，值将发送到服务器

<form action="" method="post">
    <input type="hidden" id="image_order" name="image_order" value="" />
<ul id="sortable" style="width: 524px;">
    <li id="00001" class="ui-state-default"><img src="00001.jpg" width="100" height="90" /></li>
    <li id="00002" class="ui-state-default"><img src="00002.jpg" width="100" height="90" /></li>
    <li id="00003" class="ui-state-default"><img src="00003.jpg" width="100" height="90" /></li>
    <li id="00003" class="ui-state-default"><img src="00004.jpg" width="100" height="90" /></li>  
</ul>
<div style="clear:both;"></div>
<input name="Submit" value="RE-ORDER" type="submit" />
</form>​


 $(function() {
        $( "#sortable" ).sortable({
            placeholder: "ui-state-highlight",
            cursor: 'crosshair',
            update: function(event, ui) {
                var order = $("#sortable").sortable("toArray");
                $('#image_order').val(order.join(","));
                alert($('#image_order').val());
            }
    });
        $( "#sortable" ).disableSelection();
});​

​
$（函数（）{
$（“#可排序”）。可排序({
占位符：“ui状态突出显示”，
光标：“十字线”，
更新：功能（事件、用户界面）{
风险值顺序=$（“#可排序”）。可排序（“toArray”）；
$（'#image_order'）.val（order.join（“，”）；
警报（$（'#image_order'）.val（））；
}
});
$（“#可排序”）.disableSelection（）；
});​

---

以下是最新的链接。

我认为这些链接将帮助您：）

<form action="" method="post">
    <input type="hidden" id="image_order" name="image_order" value="" />
<ul id="sortable" style="width: 524px;">
    <li id="00001" class="ui-state-default"><img src="00001.jpg" width="100" height="90" /></li>
    <li id="00002" class="ui-state-default"><img src="00002.jpg" width="100" height="90" /></li>
    <li id="00003" class="ui-state-default"><img src="00003.jpg" width="100" height="90" /></li>
    <li id="00003" class="ui-state-default"><img src="00004.jpg" width="100" height="90" /></li>  
</ul>
<div style="clear:both;"></div>
<input name="Submit" value="RE-ORDER" type="submit" />
</form>​


 $(function() {
        $( "#sortable" ).sortable({
            placeholder: "ui-state-highlight",
            cursor: 'crosshair',
            update: function(event, ui) {
                var order = $("#sortable").sortable("toArray");
                $('#image_order').val(order.join(","));
                alert($('#image_order').val());
            }
    });
        $( "#sortable" ).disableSelection();
});​