jQuery UI Sortable は並び順を保存しなければ意味がない


jQuery UI はとても便利なライブラリなので使わない手はありません。

ドラッグアンドドロップで要素の並び替えができる Sortable

サンプル1

使い方

必要なJavaScriptファイル

jQuery
jQuery UI

実装

> コーディング

<ul class="sortable">
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
	<li>Item 4</li>
	<li>Item 5</li>
</ul>

> JavaScript

$(function() {
	$( ".sortable" ).sortable();
});

たったこれだけで、ドラッグアンドドロップによる要素の並び替えができるようになります。
オプションやメソッドを設定することでいろいろできます。

リッチなUIって感じですね!

「で?」

ていうか、

「並び替えて、それで??」

ということで、結局は要素を並び替えられるだけではなんの役にも立ちません。

並び順を保存しなければ意味なし!

ということで、保存先としてはクッキーかデータベースの2択になるでしょう。
それぞれについてみていきます。

並び順をクッキーに保存

いわゆる iGoogle や WordPress の管理画面のように、ユーザ選好で要素の配置を決められる UI の実現です。

必要なJavaScriptファイル

jQuery
jQuery UI
jquery.cookie.js

実装

> コーディング

<ul class="sortable">
    <li id="1">Item 1</li>
    <li id="2">Item 2</li>
    <li id="3">Item 3</li>
    <li id="4">Item 4</li>
    <li id="5">Item 5</li>
</ul>

> JavaScript

$(function() {
	$(".sortable").sortable();
	$(".sortable").disableSelection();
	$(".sortable").sortable({
		update: function(ev, ui) {
			var updateArray =  $(".sortable").sortable("toArray").join(",");
			$.cookie("sortable", updateArray, {expires: 30});
		}       
	});
	if($.cookie("sortable")) {
		var cookieValue = $.cookie("sortable").split(",").reverse();
		$.each(
			cookieValue,
			function(index, value) {$('#'+value).prependTo(".sortable");}
		);
	}
});

【解説】

sortable の toArray メソッドを指定することで、要素の id をシリアライズして配列として取得できます。
並び替えをしたら並び順をクッキーに保存。再読み込み時にはクッキーを参照して要素を並び替える処理をしています。

サンプル2(並び替えたらリロードしてみてください)

並び順をデータベースに保存

必要なJavaScriptファイル

jQuery
jQuery UI

実装

> コーディング

<form action="" method="post">
<ul class="sortable">
    <li id="1">Item 1</li>
    <li id="2">Item 2</li>
    <li id="3">Item 3</li>
    <li id="4">Item 4</li>
    <li id="5">Item 5</li>
</ul>
<input type="hidden" id="result" name="result" />
<button id="submit">submit</button>
</form>

> JavaScript

$(function() {
	$(".sortable").sortable();
	$(".sortable").disableSelection();
	$("#submit").click(function() {
		var result = $(".sortable").sortable("toArray");
		$("#result").val(result);
		$("form").submit();
	});
});

【解説】

サブミットボタンが押下されたら、hiddenのinput要素に、並び順がカンマ区切りで結合された文字列がセットされて、サブミットされます。こんな感じの文字列→ “1,2,3,4,5”

あとは、PHP側でデータを受け取ってデータベースに保存すればOKですね。
カンマ区切りで分割して配列にして、serializeして保存しておくのがおすすめ。

一連の流れをサンプルとしてアップしておきます。github/hijiriworld

  • sukobuto.com

    はじめまして。
    ちょうど探していた内容で、とても参考になりました!ありがとうございます。

    ところで、どうやら jQuery UI が読み込まれていないようで、ソートができなくなっていますよ。。。

    • ご報告ありがとうございます!!

      直しました。。

  • takayoshi

    はじめまして。
    参考にさせて頂いています!
    大変お手数なのですが、データベースに保存する手順をご享受頂けないでしょうか…。
    完全にハマってますm(_ _)m

    • 返信遅くなりました。
      POSTされるのは “1,2,3,4,5” という値ですので、例えば、PHP側でシリアライズして serialize($result) 配列としてデータベースに保存。テンプレートの出力前に unserialize した変数をもとに並び順を再現します。

      • takayoshi

        お忙しい中、お返事を頂きありがとうございました。
        しかし、やはり出来ませんでした…。
        色々やってみたのですが(^^;
        きっと僕の知識が足りてないのが原因だと思います。
        今後も参考にさせて頂き、勉強しようと思います。
        ありがとうございますm(_ _)m

        • PHP側でデータは受け取れるはずですなので、データベース保存処理はがんばってみてください!

          • takayoshi

            ありがとうございます (> <)
            頑張ります!!

          • takayoshi

            何度もすみませんm(_ _)m
            お忙しいとは存じておりますが、お力を貸してくださいませ。

            お手すきでない場合は完全に無視してください。
            自分勝手な事も理解した上での質問ですので…
            ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
            実は$resultをprintしてみたところ、配列が格納されていない事が分かりました。
            データベースからの呼び出しがおかしいのかと思い、ご意見を賜りたかったのです。
            ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
            echo ”;$my_Row = mysql_query(“SELECT * FROM tablesort”,$my_Con);if (!$my_Row){  die(mysql_error());}while($row = mysql_fetch_array($my_Row)){$files = $row[“file”];$no = $row[“no”];header(“Content-type: image/jpg”);echo <<< EOFEOF;}echo ”;echo ”;
            ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
            すごく暇な時にでも見て頂ければ光栄ですm(_ _)m

          • hijiriworld

            > takayoshi さん
            POSTされる値は配列ではなく「カンマ区切りの文字列」です。 “1,2,3,4,5”
            配列にしたいのであれば、PHP側でカンマ区切りで分割します。

            一連のサンプルをアップしておきます。

          • takayoshi

            感激です(><)
            お忙しい中ありがとうございます!!!
            まさか、見ず知らずの僕にここまでしてくれるなんて…。

            実装完了したら報告させて頂きます!
            m(_ _)m

          • Takayoshi

            お久しぶりです!
            以前何度か質問をさせて頂きました「岩嵜」といいます。

            やっと出来ました!!
            本当にありがとうございます。

            何故だか分りませんが、画像を並べ替えようとしていたのですが、テキストを並べ替えるようにしたらちゃんと出来ました★
            画像を呼び出してに入れると変数が入らなかったのです。
            これに気付くのに今までかかっちゃいました(^^;
            将来的には画像でも出来るように頑張ります!

            もぅ感謝の言葉しかみあたりませんが、本当に助かりました!
            ありがとうございます!!
            m(_ _)m

          • hijiriworld

            > takayoshi さん
            うまくいったようで良かったです^^

  • Aussie0907

    IE8で実行すると 、「オブジェクトでサポートされていないプロパティまたはメソッドです(line2)(jquery-1.8.0.min.js)」とエラーが発生してしまいます。ミニマム化されたJSの為、実際何がエラーなのかわからなく困っています。だれかご教授頂けますでしょうか。よろしくお願いします。

  • Pingback: 知っておくと効率的!コーポレートサイト制作が捗るjQuery プラグインや使い方まとめ | コムテブログ()

  • ezjo

    こんにちは。わかりやすい解説ありがとうございます!
    ただこちらにあるクッキーに保存するサンプル2ですがリロードすると元に戻ってしまいます。ChromeとIEで確認しました。
    何か原因などわかりますでしょうか?
    もしおわかりになる場合、教えて頂ければと思います。

  • Pingback: Web制作で使えた!jQueryプラグインまとめ+起業しました | コムテブログ()