ドラッグ＆ドロップでli要素の並べ替え→DB書き換え

リストの項目をドラッグ&ドロップで並び替えて、表示順をDBにUPDATEするまでの流れをめも。
タッチデバイスにも対応させました。

jqueryとjquery-uiの読み込み¹

<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>

上下を間違えてエラーを吐くという凡ミスをやらかしました…
jqueryを先に書きましょうｗ

D&Dが可能なリストの表示

とても簡単。

JavaScript

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

html

<form action="" method="post">
    <ul class="sortable">
<? for($i=1; $i<=$max_cnt; $i++) { ?>
        <li id="<?=$i?>"><?=$name[$i]?></li>
<? } ?>
     </ul>
    <input type="hidden" id="result" name="result" />
    <button id="submit">submit</button>
</form>

変数部分はDBから拾ってきている部分になります。
idの部分が結果として返るので処理しやすい値を格納しましょう(｀・ω・´)
ここでは順番に1,2,3...となっていることにします。

この時点で表示されてるリストはD&Dが可能です。
見た目的にはリストの入れ替えが完了する状態。

で、それをDBに反映させないことには意味がないので以下の処理を行います。

並び替えたリストをDBに書き込む

if($_POST['result']){
	//$_POST['result']内にはliのIDが上から順番コンマ区切りの文字列で格納されています。
	//1,2,3,4 だったものを 4,2,1,3　と並び替えれば　$_POST['result']="4,2,1,3"です。
	
	$result = $_POST['result'];
	
	//順に処理するために配列に格納
	$result_array = explode(',', $result);
	
	$nom = 1; //idに対して番号を１からふる
	foreach($result_array as $no){
		//この中で適宜DBに格納する処理
		//"UPDATE テーブル名 SET no='$nom' WHERE id='$no'";
		$nom++;//$nomを１つずつ増やしていく
	}
}

タッチデバイスでもD&Dを使いたい

そんなときの救世主がこいつです。
jQuery UI Touch Punch

これをDLしてリンクを貼るだけです。
直リンクはしないで！！！って書いてあるので自分の環境にDLしてリンクしましょう。

<script src="js/jquery.ui.touch-punch.min.js"></script>

とりあえずiPhoneでは問題なく動きます。

まとめ

• class="sortable"の内のid要素がコンマ区切りのresultとして飛んでくる、ということさえ押さえていれば自由自在。
• リストだけでなくテーブルの並び替え²もいけた
• resultの名前ももちろん変えられる
• jQuery UI Touch Punchが便利すぎる

参考サイト

• MySQLのデータをドラッグで並替（jqueryUI）のメモ　－　Qiita：tabo_purify様
• jQuery UI Sortable は並び順を保存しなければ意味がない：hijiriworld Web様
• jQuery UIをタッチデバイスに対応させるためのライブラリ・jQuery UI Touch Punch：kachibito.net様
• jQueryで簡単にドラッグ＆ドロップのソートを実装する方法：アシアルブログ様

1. 最新版(2016/8/22現在)のjQuery(3.1.0)/jQueryUI(1.12.0)でも動きました。 ↩

2. テーブルに適用するときは<tbody>タグが必要です！ ↩