ドラッグ＆ドロップでリストの並び替え

広報部

2021/02/03

こんにちは、藤本です。

先日、WEBでのシステムで、並びの順番を登録や更新する機能を実装しました。

データベースのデータをWEB上に表示し、WEB上で並びの順番を変更し、
そのままデータベースに更新・登録保存する方法を少し手こずったので
同じことをしようとしている方などに向けてご紹介したいと思います。

サンプル

下記リストの並び替えができます。

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

ドラッグ＆ドロップで並び替えについて

初めは、数字のナンバーフォームで数字を指定し、データベース更新する方法で実装しました。
導入は簡単ですが、同じ数字で登録できてしまうのと直感的に見ずらさもあり、ユーザー的には使いづらいものになりました。

直感的に「ドラッグ＆ドロップ」で並び替え指定できる方が、使いやすくなるのは間違いないです。
なので「ドラッグ＆ドロップ」で並び替え指定できる機能を実装することにしました。

今回は、jQuery UI の Sortable を使った方法をご紹介します。

jqueryとjquery-uiの読み込み

まず、jqueryとjquery-uiを読み込みます。

上下を間違えるとエラーになるので、jqueryを先に書きましょう

ライブラリをダウンロードして設置する方法もあります。
以下のリンクからダウンロードできます。
jquery
jquery-ui

タッチデバイスには、「jQuery UI Touch Punch」をダウンロードしましょう。

ドラッグ＆ドロップ可能なリストを作成

<form action="" method="post">
    <ul class="sortable">
       <?php foreach($datebase as $date) { ?>
        <li id="<?php echo $date['id']; ?>"><?php echo $date['name']?></li>
       <?php } ?>
     </ul>
    <input type="hidden" id="list-ids" name="list-ids" />
    <button id="submit">更新</button>
</form>

変数部分はデータベースから拾ってきている部分になりますので、書き換えてください。
idの部分は、そのテーブルの主キーを設定すると扱いやすです。

 $(function() {
      $(".sortable").sortable();
      $(".sortable").disableSelection();
      $("#submit").click(function() {
          var listIds = $(".sortable").sortable("toArray");
          $("#list-ids").val(listIds);
          $("form").submit();
      });
  });

ここまでで、ドラッグ＆ドロップ可能なリストは完成です。
リストの入れ替えをドラッグ＆ドロップですることが可能です。

ここからデータベースに反映させる処理を行います。

並び替えた順番をデータベースに反映させる

if($_POST['list-ids']){
    $list = $_POST['list-ids'];
    //配列に格納
    $lists = explode(',', $result);
    $sql_sort='';
    $sort= 1; 
    foreach($lists as $id){
        $sql_sort. =  ' WHEN '.$id.' THEN '.$sort;
        $sort++;
    }
    $sql　= ' UPDATE テーブル名 SET ソートカラム名 = case IDカラム名'.$sql_sort.' END,';
    $stmt = $dbh->prepare($sql);
    $stmt->execute();
}

$_POST[‘list-ids’]内にはliタグで設定したidの部分の値が
上から順番にコンマ区切りの文字列で格納されています。
1,2,3,4 だったものを 3,2,1,2　と並び替えをすると$_POST[‘list-ids’]=”3,2,1,2″です。

この値を順番に繰り返してデータベースに保存させます。
繰り返される順番が、並びの順番になります。
IDカラム名の値が「＄id」と同じレコードの
ソートカラム名の値を「＄sort」に更新しています。

これでデータベースの登録が完了になります。