【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

    • リスト1

 

    • リスト2

 

    • リスト3

 

    • リスト4

 

    • リスト5

 

    • リスト6

 

    • リスト7

 

    • リスト8

 

 
テーブルのHTML

 

項目1 項目2 項目3
1行目 1行目 1行目
2行目 2行目 2行目
3行目 3行目 3行目
4行目 4行目 4行目
5行目 5行目 5行目
6行目 6行目 6行目
7行目 7行目 7行目
8行目 8行目 8行目

 

javascriptの記述

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

最後に

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

スポンサーリンク

POPULAR

もきち

書いた人

もきち

Director / Creator