5

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

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

2 回答 2

13

每次排序时，使用update: function(){}in sortable 将值更新为隐藏的输入字段。这是我的代码，它会在您每次排序时更新隐藏的输入。提交表单时，值将发送到服务器。

<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();
});​

这是演示。

于 2012-09-19T13:20:07.093 回答
4

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

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

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

于 2012-09-19T13:17:36.840 回答