JavaScriptで要素をドラッグ&ドロップのマウス操作で並び替えるプログラムを解説【Sortable】

2020年9月2日システムJavaScript,Sortable,プログラムコード,プログラム入門

【初心者】JavaScriptのjQuery UIで要素の順番をドラッグ&ドロップで並び替えるSortableをプログラミングを解説【プログラミング初心者の入門講座】
【初心者】JavaScriptのjQuery UIで要素の順番をドラッグ&ドロップで並び替えるSortableをプログラミングを解説【プログラミング初心者の入門講座】

どうも、UT(@ut_1029)です。

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を指定する理由

metaタグでcharset(文字コード)を指定しないとWebページが文字化けする原因となります。

Sortable関連のファイルをCDNで読み込む

Sortable関連のファイルをCDNで読み込みます。
ダウンロード:http://js.studio-kingdom.com/jqueryui/interactions/sortable

CDNとは

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も含まれる)

マウス操作で並び替えできるリストを用意

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を使って要素の順番をマウス操作で並び替えするプログラムを解説しました。

ライブラリを使うとたったの3行で出来ちゃうんで便利です!

JavaScriptには、他にもたくさん便利なライブラリがあります。知っていると開発効率が断然アップします。いざという時は利用するのもアリです。
Sortable:http://js.studio-kingdom.com/jqueryui/interactions/sortable

最後まで読んでもらいありがとうございます。

【勉強】JavaScriptのjQUery UIでSortable【プログラミング初心者の入門講座】#StudyWithMe
プログラミング基礎講座

UTの日常では、プログラミングを0から始める方法や基礎知識を解説しています。ぜひ他の記事もご覧ください。

プログラミング未経験から今すぐに始める方法について解説します。なにから始めたらいいのかわかない人は是非ご覧ください。

プログラミング未経験から独学で基礎勉強を始めた人向けに理解するコツやポイントをサンプルコードを使って解説します。

基礎学習ばかりだと勉強に飽きたり身につかなかったりします。プログラミング初心者からステップアップする基礎知識を使ったプログラムのサンプルコードをまとめて紹介します。

UT
UTの日常

1985年生まれ1児の父親です。ブログとか副業で収入を得る手段を模索中であります。(無理しない程度が理想wだから実績が出ないorz)
UTのプロフィール
Amazon欲しいものリスト