LoginSignup
45
37

More than 5 years have passed since last update.

jQueryUIを使った並び替え機能

Posted at

jQuery周りはいつもすぐに忘れてしまうのでメモしておきます。
リストをドロッグ&ドロップで並び替えて並びの順番をDBに保存するやり方です。

jQueryUIを使った並び替え機能の付け方

jQueryとjQueryUIを読み込む

jQuery ajax google と検索してjQueryとjQueryUIのソースをコピペ

example.html
<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 の数値となるようにする。

example.html
<ul id="examplelist">
<!--くるくる回して表示始まり-->
<li id="listitem_X" data-id="X">リストX <span class="item-drag">[並び替え]</span></li>
<!--くるくる回して表示終わり-->
</ul>

jQueryの設定を書く

ドラッグできる方向は縦方向(y)のみで、ドラッグしている間は透明度を半分に、ドラッグできる箇所はの箇所のみ、ドロップした際に並び順をポストする、という設定です。

example.html
<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に、"-"(ハイフン)、"="(等号)、"_"(アンダースコア)があるかどうかを判別し、その文字で分割してハッシュ文字列を生成します。」
というわかるようなわからないような説明が・・・
シリアライズ、というのは、変換する、ということのようです。

並び替えたときのレスポンスチェック

実際どのような挙動をするかを見ます。

ajax_sort_examplelist.php
var_dump($_POST['sortitem']);

としておいて、リスト1をリスト0の上部にドロップすると、
Firefox の Firebug で下記のようなレスポンスがあります。

string(35) "listitem[]=1&listitem[]=0&listitem[]=2"

list の id である listitem_X のアンダースコアの前で分割されたものが配列になって返ってくるようです。
そこで次はクエリ文字列を分解するparse_strを使ってみて、再度リストを元に戻してみます。

ajax_sort_examplelist.php
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 はレスポンスの通りです。

ajax_sort_examplelist.php
$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);
}
45
37
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
45
37