jQuery周りはいつもすぐに忘れてしまうのでメモしておきます。
リストをドロッグ&ドロップで並び替えて並びの順番をDBに保存するやり方です。
jQueryUIを使った並び替え機能の付け方
jQueryとjQueryUIを読み込む
jQuery ajax google と検索してjQueryとjQueryUIのソースをコピペ
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
実際に表示されるリストを作る
- リスト0 [並び替え]
- リスト1 [並び替え]
- リスト2 [並び替え]
みたいなリストを表示できるようにする。それぞれのリストにはidをつける。
下記の X はDBのテーブルに入っているユニークな id の数値となるようにする。
<ul id="examplelist">
<!--くるくる回して表示始まり-->
<li id="listitem_X" data-id="X">リストX <span class="item-drag">[並び替え]</span></li>
<!--くるくる回して表示終わり-->
</ul>
jQueryの設定を書く
ドラッグできる方向は縦方向(y)のみで、ドラッグしている間は透明度を半分に、ドラッグできる箇所はの箇所のみ、ドロップした際に並び順をポストする、という設定です。
<script type="text/javascript">
$(function() {
$('#examplelist').sortable({
axis: 'y',
opacity: 0.5,
handle: '.item-drag',
update: function() {
$.post('ajax_sort_examplelist.php', {
sortitem: $(this).sortable('serialize')
})
}
});
});
</script>
serializeという値は、jQueryの日本語リファレンスページによると
「並べ替えた順番で、Sortable アイテムに設定されたIDから、フォーム送信やajax送信できるようにシリアライズします。リクエスト送信時に、URLに追加可能なハッシュを、並べ変えた要素の順番で生成します。IDに、"-"(ハイフン)、"="(等号)、"_"(アンダースコア)があるかどうかを判別し、その文字で分割してハッシュ文字列を生成します。」
というわかるようなわからないような説明が・・・
シリアライズ、というのは、変換する、ということのようです。
並び替えたときのレスポンスチェック
実際どのような挙動をするかを見ます。
var_dump($_POST['sortitem']);
としておいて、リスト1をリスト0の上部にドロップすると、
Firefox の Firebug で下記のようなレスポンスがあります。
string(35) "listitem[]=1&listitem[]=0&listitem[]=2"
list の id である listitem_X のアンダースコアの前で分割されたものが配列になって返ってくるようです。
そこで次はクエリ文字列を分解するparse_strを使ってみて、再度リストを元に戻してみます。
parse_str($_POST['sortitem']);
var_dump($listitem);
すると下記のようなレスポンスがありますので、
これを使ってDBをアップデートします。
array(3) {
[0]=>
string(1) "0"
[1]=>
string(1) "1"
[2]=>
string(1) "2"
}
並び順をDBに保存する
DBのデータが入ったテーブルの narabi という列に、並び替えた後の並び順を、リストの数だけくるくると全部アップデートします。id はレスポンスの通りです。
$con = connectdb();
parse_str($_POST['sortitem']);
foreach ($listitem as $key => $val) {
$sql = "update example_table set narabi=".$key." where id=".$val;
mysql_query($sql, $con);
}