Edited at

ドラッグ&ドロップで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>タグが必要です!