【jQuery】タッチやドラッグ&ドロップでリストの並び替えを簡単に実装する方法

もきち もきち
2017.12.05

こんにちは。もきちです。
今回は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ファイルの後で読み込む必要があります。

 

HTMLの記述

リストのHTML

 

 

テーブルのHTML

 

 

javascriptの記述

操作したいリストの親要素、今回の場合は#list-sampleと#table-sample tbodyのそれぞれにsortable()を指定するだけです!

最後に

一覧に並べた商品の表示箇所を移動させて比較しやすくする等、使いどころを考えれば非常に便利な機能です。ToDoリストとかも作れちゃいますね。
簡単なので、ぜひ一度試してみてはいかがでしょうか。

スポンサーリンク

POPULAR

もきち

もきち

Director / Creator

もきち

もきち

Director / Creator

フロントエンドの開発をメインで担当しています。マルチなクリエイターを目指しています。お好み焼きはおかずです。