jQuery UI 要素の並び順を変えるサンプル(sortable)

jQuery UIの要素の並び順をドラッグ・アンド・ドロップで変えるサンプルです。
Sortable Widgetを使用します。

目次

Sortable Widget

  • jQuery UIのライブラリです。
  • 要素の並び順をドラッグ・アンド・ドロップで変えることができます。
  • jquery.min.jsに加えてjquery-ui.min.jsを追加します。
  • 以下はjQuery UIのSortable Widgetのリンクです。
    http://api.jqueryui.com/sortable/

サンプル

Sortable Widgetのサンプルです。
テーブルとリストの行をドラッグ・アンド・ドロップで並び順を変えることができます。

テーブル1
テーブル2
テーブル3
テーブル4
  • リスト1
  • リスト2
  • リスト3
  • リスト4

コード

上記サンプルのコードです。
25行目からは、テーブルの行の並び替えをしています。
26行目のopacityは、ドラッグ時の透明度です。(0に近いほど透明)
27行目のplaceholderは、ドロップする先の見え方をCSSで指定しています。18行目の.ph1が適用されます。
30行目からは、リストの行の並び替えをしています。
31行目のcursorはドラッグ時のカーソルの形を指定します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>sortableのサンプル</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<style>
table{
	width:100%;
	border:1px solid #000000;
	border-collapse: collapse;
	background-color:lavender;
}
td{
	border:1px solid #000000;
}
.ph1{
	border: dotted 2px blue;
}
</style>
<script>
$(function() {
	// テーブルの行の並び替え
	$('#t1').sortable({
		opacity: 0.5,
		placeholder: "ph1",
	});
	// リストの行の並び替え
	$('#t2').sortable({
		cursor: "move",
		opacity: 0.7,
		placeholder: "ph1",
	});
});
</script>
</head>
<body >
<table>
	<tbody id="t1">
	<tr><td>テーブル1</td></tr>
	<tr><td>テーブル2</td></tr>
	<tr><td>テーブル3</td></tr>
	<tr><td>テーブル4</td></tr>
	</tbody>
</table>
<ul id="t2">
	<li>リスト1</li>
	<li>リスト2</li>
	<li>リスト3</li>
	<li>リスト4</li>
</ul>
</body>
</html>

現在の並び順を取得する方法

ドラッグ・アンド・ドロップすると並び順が表示されます。

  • リスト1
  • リスト2
  • リスト3
  • リスト4

取得した並び順 :

コード

上記サンプルのコードです。
19行目のupdateイベントは、並び順が変更される毎に呼び出されます。
21行目は、sortableメソッドの引数にtoArrayを指定して現在の並び順を取得しています。
29行目からのリストのidの値は、並び順の番号として表示されます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jqueryのsortableのサンプル</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<style>
.ph1{
	border: dotted 2px blue;
}
</style>
<script>
$(function() {
	// テーブルの行の並び替え
	$('#t3').sortable({
		opacity: 0.5,
		placeholder: "ph1",
		update: function(event,ui){
			//現在の並び順を取得
			$('#t4').text($('#t3').sortable("toArray"));
		}
	});
});
</script>
</head>
<body >
<ul id="t3">
	<li id="1">リスト1</li>
	<li id="2">リスト2</li>
	<li id="3">リスト3</li>
	<li id="4">リスト4</li>
</ul>
<p>取得した並び順 : <span id="t4"></span></p>
</body>
</html>

関連の記事

jQuery UI アコーディオンのサンプル(accordion)
jQuery UI カレンダーから日付を入力するサンプル(datepicker)
jQuery UI モーダルでダイアログを開くサンプル(dialog)
jQuery UI タブのサンプル(tabs)
jQuery UI ツールチップのサンプル(tooltip)
jQuery UI オートコンプリートのサンプル(Autocomplete)
jQuery UI 要素をドラッグ・アンド・ドロップするサンプル(draggableとdroppable)



△上に戻る