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

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

Sortable Widget
要素の並び順を変える
現在の並び順を取得する

Sortable Widget

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

要素の並び順を変える

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

テーブル1

テーブル2

テーブル3

テーブル4

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

コード

上記サンプルのコードです。

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>
$(function() {
	// テーブルの行の並び替え
	$('#t1').sortable({
		opacity: 0.5,
		placeholder: "ph1",
	});
	// リストの行の並び替え
	$('#t2').sortable({
		cursor: "move",
		opacity: 0.7,
		placeholder: "ph1",
	});
});
</script>

27行は、テーブルの行の並び替えをしています。
28行目のopacityは、ドラッグ時の透明度です。(0に近いほど透明)
29行目のplaceholderは、ドロップする先の見え方をCSSで指定しています。4行目の.ph1が適用されます。
32行は、リストの行の並び替えをしています。
33行目のcursorはドラッグ時のカーソルの形を指定します。

現在の並び順を取得する

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

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

取得した並び順 :

コード

上記サンプルのコードです。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/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>

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

<script>
$(function() {
	// テーブルの行の並び替え
	$('#t3').sortable({
		opacity: 0.5,
		placeholder: "ph1",
		update: function(event,ui){
			//現在の並び順を取得
			$('#t4').text($('#t3').sortable("toArray"));
		}
	});
});
</script>

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