BLOG

Blitz Gateスタッフブログ

BLOG

jQuery UIで短時間実装!リストの並び順をドラッグ&ドロップで変更する

書いた人:

HTML , jQuery , Web  

592_thumb

こんにちは。もきちです。
今回は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リストとかも作れちゃいますね。
簡単なので、ぜひ一度試してみてはいかがでしょうか。
 

  • このエントリーをはてなブックマークに追加