リストの項目をドラッグ&ドロップで並び替えて、表示順を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を先に書きましょうｗ
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として飛んでくる、ということさえ押さえていれば自由自在。 - リストだけでなくテーブルの並び替え2もいけた
-
resultの名前ももちろん変えられる - jQuery UI Touch Punchが便利すぎる
参考サイト
- MySQLのデータをドラッグで並替（jqueryUI）のメモ － Qiita：tabo_purify様
- jQuery UI Sortable は並び順を保存しなければ意味がない：hijiriworld Web様
- jQuery UIをタッチデバイスに対応させるためのライブラリ・jQuery UI Touch Punch：kachibito.net様
- jQueryで簡単にドラッグ＆ドロップのソートを実装する方法：アシアルブログ様