JavaScriptで要素をドラッグ＆ドロップのマウス操作で並び替えるプログラムを解説【Sortable】
JavaScriptで要素の順番をマウス操作で並び替えるJQuery UIのSortableを使ったプログラミングの解説です。
この記事を書いている僕は、プログラミング歴10年以上のプログラマーです。
詳細：プログラミング未経験の新卒が10年間プログラマーとして仕事して思うこと
JQuery UIのSortableで要素の順番をマウス操作で並び替えるプログラム解説
JQuery UIのSortableで要素の順番をマウス操作で並び替えるプログラミングを解説します。
JQuery UIのSortableを使うとめちゃ簡単に実装出来ます！
JQuery UI の Sortable
JQuery UIのSortableとは、選択した要素をマウス操作によって並べ替えを可能にするJQueryのライブラリです。
ダウンロード：http://js.studio-kingdom.com/jqueryui/interactions/sortable
ぜひチャレンジしてみてください。
サンプルコード
では、さっそくJQuery UIのSortableを使って要素をマウス操作で並び替えるサンプルコードから紹介します。
(基本的にコピペで動くと思います。)
<html>
<head>
<meta charset="UTF-8">
<title>JQuery UI Sortable sample</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<style>
#target-list {
list-style-type: none;
margin: 0;
padding: 0;
}
#target-list li {
border: 1px solid #000;
margin: 2px;
padding: 5px;
font-size: 1.4em;
height: 40px;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<h1>JQuery UI Sortable sample</h1>
<ul id="target-list">
<li><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>list(1)</li>
<li><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>list(2)</li>
<li><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>list(3)</li>
<li><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>list(4)</li>
</ul>
</body>
<script>
$("#target-list").sortable();
$("#target-list").disableSelection();
</script>
</html>HTML部分の解説
JQuery UIのSortableを使って要素をマウス操作で並び替えるサンプルコードのHTML部分から解説します。
文字コードを指定
HTMLのheadタグ内にmetaタグでcharset(文字コード)をUTF-8に指定します。
<meta charset="UTF-8">metaタグでcharset(文字コード)を指定しないとWebページが文字化けする原因となります。
Sortable関連のファイルをCDNで読み込む
Sortable関連のファイルをCDNで読み込みます。
ダウンロード：http://js.studio-kingdom.com/jqueryui/interactions/sortable
Content Delivery Networkの略です。
リソース(CSSやJQueryなど)を自サーバへ用意せず、外部サーバから取得する仕組みです。リソースを配信する外部サーバは、最適化されたネットワークでリソースを配信します。
簡単にいうと「高速にリソース(CSSやJQuery)を外部サーバから取得できる」って感じです。
まずは、SortableのCSSファイルを読み込みます。
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">次にSortableのJavaScriptファイルを読み込みます。
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js">- jquery-*.**.*.js
- JQueryを利用するためのJavaScriptファイル
- jquery-ui.js
- JQuery UIを利用するためのJavaScriptファイル
(Sortableも含まれる)
- JQuery UIを利用するためのJavaScriptファイル
マウス操作で並び替えできるリストを用意
ulタグとliタグでリストを用意します。あとJavaScriptでマウス操作で並び替えるできるようにid名を"target-list"とします。
<ul id="target-list">
<li><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>list(1)</li>
<li><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>list(2)</li>
<li><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>list(3)</li>
<li><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>list(4)</li>
</ul>ちなみにliタグ内にあるspanタグのclass名「ui-icon ui-icon-arrowthick-2-n-s」は、JQuery UIで用意されているアイコンを表示するためのものです。
CSS部分の解説
JQuery UIのSortableを使って要素をマウス操作で並び替えるサンプルコードのCSS部分を解説します。
(ほとんど見た目の調整です)
見た目の調整なのでSortableとは関係ないです。なので無視してもらってOKです。
リストの見た目を調整
リストの見た目を微調整します。
<style>
#target-list {
list-style-type: none;
margin: 0;
padding: 0;
}
#target-list li {
border: 1px solid #000;
margin: 2px;
padding: 5px;
font-size: 1.4em;
height: 40px;
}
</style>JavaScript部分の解説
JQuery UIのSortableを使って要素をマウス操作で並び替えるサンプルコードのJavaScript部分を解説します。
ここからが本番！と言いたいところですが2行で完成です(超簡単)
Sortableを定義
ulタグに指定したid名の"target-list"に対してSortableを定義します。
<script>
$("#target-list").sortable();
$("#target-list").disableSelection();
</script>- sortable()
- 対象エレメントにSortableを定義
- disableSelection()
まとめ【JQuery UIのSortableで要素の順番をマウス操作で並び替えるプログラム解説】
今回はJQuery UIのSortableを使って要素の順番をマウス操作で並び替えするプログラムを解説しました。
ライブラリを使うとたったの３行で出来ちゃうんで便利です！
JavaScriptには、他にもたくさん便利なライブラリがあります。知っていると開発効率が断然アップします。いざという時は利用するのもアリです。
Sortable：http://js.studio-kingdom.com/jqueryui/interactions/sortable
最後まで読んでもらいありがとうございます。
1985年生まれ1児の父親です。Web系エンジニアを10年以上しています。
→プロフィール
→Amazon欲しいものリスト