Help us understand the problem. What is going on with this article?

jQueryUIを使った並び替え機能

More than 5 years have passed since last update.

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);
}
Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away