PHP
JavaScript
jQuery
jquery.ui

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

More than 1 year has passed since last update.

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

jqueryとjquery-uiの読み込み1

<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を先に書きましょうw

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に対して番号を1からふる
    foreach($result_array as $no){
        //この中で適宜DBに格納する処理
        //"UPDATE テーブル名 SET no='$nom' WHERE id='$no'";
        $nom++;//$nomを1つずつ増やしていく
    }
}

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

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

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

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

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

まとめ

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

参考サイト


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

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