ドラッグ＆ドロップで並び替え

並び替え

まずJQueryUIの読み込みが必要です。head内でJQueryUIのCSSおよびJSファイルを読み込んでください。

JQueryUIを読み込んだら、以下のソースで並び替えができるようになります。並び替えをおこなう要素の親要素を指定して、sortable()をおこないます。

$(function() {
    $('#sort').sortable();
});

例として、以下のようなリストを並び替えます。

<ul id="sort">
	<li>リスト１</li>
	<li>リスト２</li>
	<li>リスト３</li>
</ul>

テーブルを並び替える場合はこのような感じになります。見出しは並び替えられたくないので、tbodyにソート用のIDを振っています。

<table>
	<thead>
		<tr><th>見出し1</th><th>見出し2</th><th>見出し3</th></tr>
	</thead>
	<tbody id="sort">
		<tr><td>内容1_1</td><td>内容2_1</td><td>内容3_1</td></tr>
		<tr><td>内容1_2</td><td>内容2_2</td><td>内容3_2</td></tr>
		<tr><td>内容1_3</td><td>内容2_3</td><td>内容3_3</td></tr>
	</tbody>
</table>
</ul>

Ajaxで順番を保存する

要素の並び替えはJQueryUIを使えば簡単にできますが、ページを再表示したら順番を元に戻ってしまいます。変更した順番を保存するにはデータで並び順を持つ必要があります。ここではAjaxでリストの順番を保存する簡単な例をあげます。

まず、データとして以下のようなCSVファイルを用います。"ID,リスト名"というデータです。CSVのファイル名は"list.csv"とします。

1,リスト1
2,リスト2
3,リスト3

次に画面表示をおこなう場合には、PHPでCSVファイルを読み込んで表示します。リストのタグにはdata-idでIDを持たせます。

<ul id="#sort">
	<?php
	$f = file('list.csv', FILE_SKIP_EMPTY_LINES | FILE_IGNORE_NEW_LINES);	
	foreach($f as $v){
		$a = explode(",", $v);
		echo '<li data-id="'.$a[0].'">'.$a[1].'</li>';
	}
	?>
</ul>

スクリプトでは、並び替えが行われた場合にAjaxでPOST送信します。

$(function() {
	$('#sort').sortable({
		update: function(){
			sort_save();
		}	
	});

	function sort_save(){
		var fd = new FormData();
		var cnt = 0;
		var d = "";
		$("#sort li").each(function(i) {
			d = $(this).attr("data-id") + "," + $(this).text();
			fd.append(cnt, d);
			cnt++;
		});
	
	    $.ajax({
	    	async : false,
	        url : './ajax.php',
	        type: 'POST',
	  		dataType: 'json',
			data: fd,
	        success: function(response) {
		    	var result = JSON.stringify(response);
		    	var result_array = JSON.parse(result);
	
				if(result_array['status']==false){
					alert(result_array['errmsg']);
				}
	        },
	        error: function(xhr) {
				alert(xhr.responseText);
	        }
	    });	
	}

});

Ajaxで送信されたデータはPHPで受け取ってCSVファイルを更新します。

<?php
if($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest'){

	$err = "";
	$result = array();
	
	foreach($_POST as $v){
		$d .= $v."";
	}
	if(!file_put_contents("list.csv", $d, LOCK_EX)){
		 = "ファイルの書き込みに失敗";
	}	

	if(empty($err)){
		$result["status"] = true;
	}else{
		$result["status"] = false;
		$result["errmsg"] = ;
	}

	header("Content-Type: text/plain; charset=UTF-8");
	echo json_encode(, JSON_UNESCAPED_UNICODE);
	exit;

}
header("HTTP/1.0 400 Bad Request");
header("Content-Type: text/plain; charset=UTF-8");
print "データ更新に失敗しました。";
exit;
?>

以上がAjaxを使って並び替えの順番を保存する簡単な例です。ドラッグ＆ドロップで並び替えができるようになると使い勝手が向上しますので、是非トライしてみてください。