次のコードを使用すると、ユーザーがフロントエンドで要素の順序を変更したときに、PHP バックエンドに更新を送信できます。
$("#sortable").on("sortupdate", function() {
var dataArr = [];
$("#sortable li").each(function(idx, elem) {
dataArr[idx] = $(elem).html();
});
var dataStr = '{"newOrder":' + JSON.stringify(dataArr) + '}';
$.ajax({
url: "<url_to_php_file>",
data: dataStr
});
// alert(dataStr);
});
実際の例 (フロントエンド部分):こちら
<url_to_php_file>
要素の順序を処理する (つまり、DB に保存する) PHP ファイルへのパスに置き換える必要があります。ファイルは、通常の PHP Arrayでユーザー定義の順序にアクセスできますjson_decode($_POST["newOrder"])
。つまり、
...
$newOrder = json_decode($_POST["newOrder"]);
for ($i = 0; $i < count($newOrder); $i++) {
echo("The item labeled '" . $newOrder[$i] . "' is placed by the user at index " . $i . ".\n";
/* 1st item: index 0 */
/* 2st item: index 1 */
/* ... */
}
例: item1 、 item2 、 item3 (この順序) のアイテムを含む並べ替え可能なリストをユーザーに提示します。
ユーザーはitem2を item1 の前に配置します。この時点で AJAX 呼び出しが行われ、サーバーに配列が渡されます["item2", "item1", "item3"]
(順序に注意してください)。上記のスニペットは次のように表示されます。
The item labeled 'item2' is placed by the user at index 0.
The item labeled 'item1' is placed by the user at index 1.
The item labeled 'item3' is placed by the user at index 2.
(もちろん、何かをエコーする代わりに、各項目の DB 内のインデックス フィールドの値を更新するか、何か役に立つことを行います。)