1

おはようございます！

(私が思うに) 基本的な Html - PHP の質問がありますが、何時間も試行してもうまくいかないようです。

JqueryUI gridsort を使用するページがあります。このページで、ユーザーは自分の PC から自分の Web フォルダーに写真をアップロードできます。その後、画像はドラッグ アンド ドロップ UL 内で ahref されます。

アップロードされた画像ごとにこれを行います（ULが宣言されていないことを宣言し、以下で閉じます）

    $imgID++;


echo '<li class="ui-state-default"><img id="'.$imgID.'"'.' src="user_files/'.$file_name.'" draggable="true" height="90" width="95"></li>';

これにより、アップロードするファイルの量に基づいてドラッグ アンド ドロップの画像が作成され、それらを視覚的に再編成できるようになります。左上から右下の順。私がやりたいのは、画像の順序を返すことができるようにすることです。各画像に ID を割り当てるために $imgID++ をいじりました。

私の質問は - リストを処理できるように、リストの順序を戻すにはどうすればよいですか。(つまり、SQL や、おそらく XML に入れられる可能性は低いです。)

ありがとう！

4

2 に答える 2

1

簡単な答えは、li および image タグ以外にリストに何もないと仮定して、ul 内の画像をループすることです。

var listofIDs = [];
$('ul li').each(function(){
    listofIDs.push($(this).find('img').prop('id));
});
$.ajax{[
    url:'example.com',
    data: {'list':listofIDs},
    type: 'post'
]}.done(function(msg){alert(msg);});

また、データベース idnum を単にインクリメンタとしてではなく ID として使用する必要があるため、列の更新が簡単になります。image_order という列を作成し、ajax スクリプトで画像を更新するときに、画像 ID に基づいて順序を設定します

于 2013-07-18T14:58:10.563 に答える
1

このようなことを意味しますか？

Jquery - ソート可能 (更新時に、シリアライズ順序で ajax 呼び出しを行います)

$(document).ready(function() {
    $("#lista-prova").sortable({
      handle : '.trascinabile',
      update : function () { 
        var ordina = $('#lista-prova').sortable('serialize');
        $("#info").load("riordinamento.php?"+ordina);
      }
    });
});

これは更新用のphpコードです

<?php
foreach ($_GET['oggettoItem'] as $position => $item) :
    $sql[] = "UPDATE `table` SET `position` = $position WHERE `id` = $item";
endforeach;

print_r ($sql);
?>

これはソート可能なアイテムのhtmlです

<div id="info">In attesa di aggiornamento post-riordinamento</div>
<div id="lista-prova">
    <li id="oggettoItem_1"><img src="arrow.png" width="48" height="48" class="trascinabile" /><strong>Oggetto 1</strong></li>
    <li id="oggettoItem_2"><img src="arrow.png" width="48" height="48" class="trascinabile" /><strong>Oggetto 2</strong></li>
    <li id="oggettoItem_3"><img src="arrow.png" width="48" height="48" class="trascinabile" /><strong>Oggetto 3</strong></li>
    <li id="oggettoItem_4"><img src="arrow.png" width="48" height="48" class="trascinabile" /><strong>Oggetto 4</strong></li>
</div>
于 2013-07-18T14:51:51.743 に答える