【WordPress】ブログを始めたらまずはこれ！人気の記事一覧を表示する
もきち
【jQuery】タッチやドラッグ＆ドロップでリストの並び替えを簡単に実装する方法
もきち
こんにちは。もきちです。
今回はjQuery UIを使ってリストの並び順をドラッグ&ドロップで変更できるようにします。
- まずはデモをご覧下さい。
- リストの並び順をドラッグ＆ドロップで変更するサンプル
それでは早速作っていきましょう！
今回はjQuery UIを利用しますので、以下のページからダウンロードしてください。
http://jqueryui.com/download/all/
古いバージョンのjQueryを使っていない場合、ダウンロードするファイルは最新のもので問題ありません。
※記事更新時の最新ファイル：jQuery UI 1.12.1 (concatenated JS and CSS files)
- jQuery UIとは？
- jQuery UIはjQueryをベースとしたライブラリであり、jQuery UIを使うと短時間で良質なGUIを実装出来ます。
ダウンロードしたjQuery UIをプロジェクトのディレクトリに置く
ダウンロードしたファイルを解凍し、以下の2つのファイルをコピーして
導入したいWebサイトのディレクトリ内に置いてください。
・jquery-ui.min.css
・jquery-ui.min.js
その後、HTMLファイルでダウンロードしたファイルを読み込みます。
※jquery-ui.min.jsはjqueryファイルの後で読み込む必要があります。
|
1 2 |
<script src="./jquery.min.js"></script> <script src="./jquery-ui.min.js"></script> |
HTMLの記述
リストのHTML
|
1 2 3 4 5 6 7 8 9 10 |
<ul id="list-sample"> <li>リスト1</li> <li>リスト2</li> <li>リスト3</li> <li>リスト4</li> <li>リスト5</li> <li>リスト6</li> <li>リスト7</li> <li>リスト8</li> </ul> |
テーブルのHTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
<table id="table-sample"> <thead> <tr> <th>項目1</th> <th>項目2</th> <th>項目3</th> </tr> </thead> <tbody> <tr> <td>1行目</td> <td>1行目</td> <td>1行目</td> </tr> <tr> <td>2行目</td> <td>2行目</td> <td>2行目</td> </tr> <tr> <td>3行目</td> <td>3行目</td> <td>3行目</td> </tr> <tr> <td>4行目</td> <td>4行目</td> <td>4行目</td> </tr> <tr> <td>5行目</td> <td>5行目</td> <td>5行目</td> </tr> <tr> <td>6行目</td> <td>6行目</td> <td>6行目</td> </tr> <tr> <td>7行目</td> <td>7行目</td> <td>7行目</td> </tr> <tr> <td>8行目</td> <td>8行目</td> <td>8行目</td> </tr> </tbody> </table> |
javascriptの記述
|
1 2 3 4 5 6 |
<script> $(function(){ $('#list-sample').sortable(); $('#table-sample tbody').sortable(); }); </script> |
操作したいリストの親要素、今回の場合は#list-sampleと#table-sample tbodyのそれぞれにsortable()を指定するだけです！
最後に
一覧に並べた商品の表示箇所を移動させて比較しやすくする等、使いどころを考えれば非常に便利な機能です。ToDoリストとかも作れちゃいますね。
簡単なので、ぜひ一度試してみてはいかがでしょうか。
- おすすめ記事
POPULAR
もきち
Director / Creator
人気記事
