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

2020年9月2日システムJavaScript,Sortable,プログラミング初心者

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

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

JavaScriptで、要素の順番をドラッグ&ドロップで並び替えることができる「jQuery UIのSortable」を使ってたプログラミングを解説します。
jQuery UI 日本語 – Sortable

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

JavaScriptのjQuery UIでSortableをプログラミングするサンプルコード

JavaScriptのjQuery UIでSortableをプログラミングするサンプルコードです。
(少しだけstyleで見た目を調整しています。)

<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>

JavaScriptのjQuery UIでSortableをプログラミングの解説

JavaScriptのjQuery UIでSortableをプログラミングを解説します。

HTML部分

HTML部分の解説です。

文字コードを指定

HTMLheadタグ内にmetaタグcharset(文字コード)をUTF-8に指定します。

<meta charset="UTF-8">

Webページ文字化けする原因は、大体がmetaタグ文字コードを指定出来ていない事が多いです。

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

Sortable関連のファイルを読み込みます。

まずは、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で、このタグに対して「要素の順番をドラッグ&ドロップで並び替えることができるようにsortableの対象」とします。

<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>
  • class="ui-icon ui-icon-arrowthick-2-n-s"
    • jQuery UIで用意されているアイコンを表示

CSS部分

CSS部分の解説です。

リストの見た目を調整

styleでリストの見た目を調整します。

<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部分

JavaScript部分の解説です。

Sortableを定義

JavaScriptでulタグに対してSortableを定義します。
(idがtarget-listの要素)

<script>
	$("#target-list").sortable();
	$("#target-list").disableSelection();
</script>
  • sortable()
    • 対象エレメントにSortableを定義
  • disableSelection()
UT
UTの日常

当ブログ(UTの日常)を運営しているUTは「プログラミング関係の仕事をしている30代1児の父親」です。詳しくは「UTのプロフィール」をご覧ください。

プログラミング解説講座

2020年9月2日システムJavaScript,Sortable,プログラミング初心者

Posted by UT