rakuishi/sortable.php

## sortable.php
<?php

// データベース接続
mysql_connect('localhost', 'root', 'root');
mysql_select_db('database');
mysql_query('SET NAMES UTF8');

// テーブルが存在しない場合は作成する
if (mysql_query('SELECT 1 FROM kurage') == FALSE) {
	$sql = "CREATE TABLE kurage (id INT UNSIGNED AUTO_INCREMENT PRIMARY KEY, name TEXT, sort INT UNSIGNED)";
	mysql_query($sql);

	// 初期データを登録する
	$kurages = array("プラヌラ", "ポリプ", "ストロビラ", "エフィラ", "稚クラゲ", "成体");
	for ($i = 0; $i < count($kurages); $i++) {
		$sql = "INSERT INTO kurage SET name = '{$kurages[$i]}', sort = '{$i}'";
		mysql_query($sql);
	}
}

// 並び順が POST に格納されている場合は、並び順を変える
$result = $_POST['result'];
if ($result != NULL) {
	// データの id が「,」区切りで順番に格納されているデータを配列に変換する
	$ids = explode(",", $result);
	for ($i = 0; $i < count($ids); $i++) {
		$id = $ids[$i] + 0;
		$sql = "UPDATE kurage SET sort='{$i}' WHERE id='{$id}'";
		mysql_query($sql);
	}
}

// ソート順にデータを取得する
$sql = "SELECT * FROM kurage ORDER BY sort";
$recordSet = mysql_query($sql);
while ($data = mysql_fetch_assoc($recordSet)) {
	$id = $data['id'];
	$name = $data['name'];
	$list .= "<li id=\"{$id}\">{$name}</li>";
}

?>
<!DOCTYPE>
<html lang="ja">
<head>
<meta charset="utf-8" />
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery-ui-1.10.3.custom.js"></script>
</head>
<body>

<h1 style="font-size: 18px">ミズクラゲの生活環</h1>

<ul id="sortable"><?php echo $list; ?></ul>

<form action="" method="post">
	<input type="hidden" id="result" name="result" />
	<input type="submit" id="submit" value="並び順を保存する" />
</form>

<script>
$(function() {
	// ソート可能にする
	$("#sortable").sortable();
	$("#submit").click(function() {
		// result に並び順を格納する
		var result = $("#sortable").sortable("toArray");
		$("#result").val(result);
		$("form").submit();
	});
});
</script>

</body>
</html>
	<?php

	// データベース接続
	mysql_connect('localhost', 'root', 'root');
	mysql_select_db('database');
	mysql_query('SET NAMES UTF8');

	// テーブルが存在しない場合は作成する
	if (mysql_query('SELECT 1 FROM kurage') == FALSE) {
	$sql = "CREATE TABLE kurage (id INT UNSIGNED AUTO_INCREMENT PRIMARY KEY, name TEXT, sort INT UNSIGNED)";
	mysql_query($sql);

	// 初期データを登録する
	$kurages = array("プラヌラ", "ポリプ", "ストロビラ", "エフィラ", "稚クラゲ", "成体");
	for ($i = 0; $i < count($kurages); $i++) {
	$sql = "INSERT INTO kurage SET name = '{$kurages[$i]}', sort = '{$i}'";
	mysql_query($sql);
	}
	}

	// 並び順が POST に格納されている場合は、並び順を変える
	$result = $_POST['result'];
	if ($result != NULL) {
	// データの id が「,」区切りで順番に格納されているデータを配列に変換する
	$ids = explode(",", $result);
	for ($i = 0; $i < count($ids); $i++) {
	$id = $ids[$i] + 0;
	$sql = "UPDATE kurage SET sort='{$i}' WHERE id='{$id}'";
	mysql_query($sql);
	}
	}

	// ソート順にデータを取得する
	$sql = "SELECT * FROM kurage ORDER BY sort";
	$recordSet = mysql_query($sql);
	while ($data = mysql_fetch_assoc($recordSet)) {
	$id = $data['id'];
	$name = $data['name'];
	$list .= "<li id=\"{$id}\">{$name}</li>";
	}

	?>
	<!DOCTYPE>
	<html lang="ja">
	<head>
	<meta charset="utf-8" />
	<script src="js/jquery-1.9.1.js"></script>
	<script src="js/jquery-ui-1.10.3.custom.js"></script>
	</head>
	<body>

	<h1 style="font-size: 18px">ミズクラゲの生活環</h1>

	<ul id="sortable"><?php echo $list; ?></ul>

	<form action="" method="post">
	<input type="hidden" id="result" name="result" />
	<input type="submit" id="submit" value="並び順を保存する" />
	</form>

	<script>
	$(function() {
	// ソート可能にする
	$("#sortable").sortable();
	$("#submit").click(function() {
	// result に並び順を格納する
	var result = $("#sortable").sortable("toArray");
	$("#result").val(result);
	$("form").submit();
	});
	});
	</script>

	</body>
	</html>