ジピる - C#ATIA

以前から悩んでいたのですが、先生にお聞きしました。

※呼び名が長いからそろそろ "ジピる" で良いんじゃないか？と思っていたら
恐らく通じる世の中になったようです。

>html css javascript でリストをドラッグアンドドロップで入れ替えられるサンプルを教えてください

お答え1

<!DOCTYPE html>
<html>
<head>
	<title>Sortable List</title>
	<!-- jQuery and jQuery UI Libraries -->
	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>
	<!-- CSS Styles -->
	<style>
		ul {
			list-style: none;
			padding: 0;
			margin: 0;
			border: 1px solid #ccc;
			width: 200px;
		}

		li {
			padding: 10px;
			background-color: #f9f9f9;
			border: 1px solid #ccc;
			margin: 5px 0;
			cursor: pointer;
		}
	</style>
</head>
<body>
	<h2>Sortable List</h2>
	<p>Drag and drop the items to rearrange the list:</p>
	<ul id="sortable-list">
		<li>Item 1</li>
		<li>Item 2</li>
		<li>Item 3</li>
		<li>Item 4</li>
		<li>Item 5</li>
	</ul>
	<script>
		$( function() {
			$( "#sortable-list" ).sortable();
			$( "#sortable-list" ).disableSelection();
		} );
	</script>
</body>
</html>

>jQueryを使わないで行えるサンプルを教えてください

お答え2

<!DOCTYPE html>
<html>
<head>
	<title>Sortable List</title>
	<!-- CSS Styles -->
	<style>
		ul {
			list-style: none;
			padding: 0;
			margin: 0;
			border: 1px solid #ccc;
			width: 200px;
		}

		li {
			padding: 10px;
			background-color: #f9f9f9;
			border: 1px solid #ccc;
			margin: 5px 0;
			cursor: pointer;
		}

		.dragged {
			opacity: 0.5;
		}
	</style>
</head>
<body>
	<h2>Sortable List</h2>
	<p>Drag and drop the items to rearrange the list:</p>
	<ul id="sortable-list">
		<li draggable="true">Item 1</li>
		<li draggable="true">Item 2</li>
		<li draggable="true">Item 3</li>
		<li draggable="true">Item 4</li>
		<li draggable="true">Item 5</li>
	</ul>
	<script>
		var dragged;

		/* 項目をドラッグした時の処理 */
		function onDragStart(event) {
			dragged = event.target;
			event.target.classList.add('dragged');
		}

		/* ドロップした時の処理 */
		function onDrop(event) {
			event.preventDefault();
			event.target.classList.remove('dragged');
			var parent = event.target.parentNode;
			if (event.target.nextSibling == dragged) {
				parent.insertBefore(dragged, event.target.nextSibling.nextSibling);
			} else {
				parent.insertBefore(dragged, event.target.nextSibling);
			}
		}

		/* ドラッグ中のカーソルを変更 */
		function onDragOver(event) {
			event.preventDefault();
			event.target.classList.add('dragover');
		}

		/* ドラッグ中のカーソルを元に戻す */
		function onDragLeave(event) {
			event.target.classList.remove('dragover');
		}

		/* ドロップ先の領域に入った時のカーソルを変更 */
		function onDragEnter(event) {
			event.preventDefault();
			event.target.classList.add('dragover');
		}

		/* ドロップ先の領域から出た時のカーソルを元に戻す */
		function onDragEnd(event) {
			event.target.classList.remove('dragged');
			event.target.classList.remove('dragover');
		}

		var items = document.querySelectorAll('#sortable-list li');
		items.forEach(function(item) {
			item.addEventListener('dragstart', onDragStart, false);
			item.addEventListener('drop', onDrop, false);
			item.addEventListener('dragover', onDragOver, false);
			item.addEventListener('dragleave', onDragLeave, false);
			item.addEventListener('dragenter', onDragEnter, false);
			item.addEventListener('dragend', onDragEnd, false);
		});
	</script>
</body>
</html>

今までの質問の中で一番短時間で答えてもらったような気がしてます。（即答です）

3つのファイルに分けて・・・とも思いましたが、まぁ良いでしょう。
僕には細かく理解出来ないのですが(涙)、探せばこれはぐらいのサンプルは
見つかりますし、もうちょっと良いサンプルも手元にあります。

ここから先なんですよ、お悩みは。