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

ブログ

Blog
  1. ホームページ制作・運営はアウラ:ホーム
  2. ブログ
  3. ドラッグ&ドロップでリストの並び替え

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

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

こんにちは、藤本です。

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

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

サンプル

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

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

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

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

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

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

jqueryとjquery-uiの読み込み


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

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

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

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

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

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

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

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

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

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

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

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

実用的な機能を探そう


「sortable」のドラッグ&ドロップでリストの並び替えをご紹介しましたが、
ドラッグ&ドロップのアニメーションを変更したりすることも可能です。

他にもたくさん実用的な機能があると思います。
そういった機能をどんどん見つけていきたいですね。

前後の記事

お電話でのお問い合わせはこちら:06-6292-8577。受付時間は平日9:30~18:30 インターネットからは24時間受付中!お問い合わせフォームはこちら