表单提交上的 JQuery-UI 可排序排序

Question

图像从数据库加载。 我想使用 JQuery-UI sortable 对图像顺序进行排序并将数据保存在表单提交中。

<script type="text/javascript">
    $(function() {
        $( "#sortable" ).sortable({
            placeholder: "ui-state-highlight",
            cursor: 'crosshair'
    });
        $( "#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="Submit" value="RE-ORDER" type="submit" />
</form>

Answer 1

每次排序时，使用可排序的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();
});​

这里是demo。

Answer 2

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

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

<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>

现在您可以从order 订购。