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

実装

> index.php

<!DOCTYPE HTML>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>sortable sample</title>
	<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fjquery%2F3.3.1%2Fjquery.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
	<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fjqueryui%2F1.12.1%2Fjquery-ui.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
</head>
<body>
	
<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>


	<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0A%09%24(function()%20%7B%0A%09%20%20%20%20%24(%22.sortable%22).sortable()%3B%0A%09%20%20%20%20%24(%22.sortable%22).disableSelection()%3B%0A%09%20%20%20%20%24(%22%23submit%22).click(function()%20%7B%0A%09%20%20%20%20%20%20%20%20var%20result%20%3D%20%24(%22.sortable%22).sortable(%22toArray%22)%3B%0A%09%20%20%20%20%20%20%20%20%24(%22%23result%22).val(result)%3B%0A%09%20%20%20%20%20%20%20%20%24(%22form%22).submit()%3B%0A%09%20%20%20%20%7D)%3B%0A%09%7D)%3B%0A%09%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
	
	<?php
	// POST値
	$result = $_POST['result'];
	var_dump( $result );
	
	echo '
';
	
	// 配列化
	$result_arr = explode(',', $result);
	var_dump($result_arr);
	
	echo '
';
	
	// シリアル化(これをDBに保存する)
	$serialize = serialize($result_arr);
	var_dump($serialize);
	
	echo '
';
	
	// シリアル化を戻す
	$result_arr = unserialize($serialize);
	var_dump($result_arr)
	?>
	
</body>
</html>

【解説】

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

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