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(){}、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 に答える