ドラッグ&ドロップで項目の並べ替えを可能にする
まずはサンプルから。
「hoge」「fuga」「piyo」の文字列をドラッグ&ドロップで並べ替えることができます。
↓実装サンプルここから
================================
- hoge
- fuga
- piyo
================================
↑実装サンプルここまで
これ、どんだけめんどくさい実装なのかと思ったらめちゃくちゃ簡単でした。
<script src=" ... /jquery.min.js"></script> <script src=" ... /jquery-ui.js"></script>
<HTML>
<ul class="sortable"> <li id="1">hoge</li> <li id="2">fuga</li> <li id="3">piyo</li> </ul>
<JS>
$(function() { $(".sortable").sortable(); });
以上。まじかよ。すごい。
ちなみにスマホ対応したいときは、↓をDLしてincludeするだけで済むっぽい。まじかよすごい。
jQuery UI Touch Punch - Touch Event Support for jQuery UI
<script src=" ... /jquery.ui.touch-punch.min.js"></script>
おまけ:ドロップしたときの処理を作る
正確にはドロップによって並びを変更したときの処理ですが。
JS側を以下のような形に変更すればOK。
<JS>
$(function() { $(".sortable").sortable({ update: function(){ // ここにドロップ時処理 } }); });
ここで随時ajaxで保存するも良し、submit用の配列なりテキストなりをこの時点で作っておくも良し。
パズルゲームとか作れそうだな。