HTML5/javascriptで要素の前後にドラッグ・ドロップ(draggable属性)

Question

下記にコードを記載させて頂いているのですが、HTML5のdraggable属性を使用して

１〜２０まで番号が振られたボックスがそれぞれ左側に縦で並んでいて、
右には横長のボックスが同じく縦に5つ並んでいて、

左のボックスを右のボックスにドラッグ・ドロップできるようにしています。

右のボックスに複数のボックスが入った時に、そのボックス内で左右にドラッグ・ドロップしたいのですができません。
今はappendChildを使用しているのでドラッグしたボックスは全て右のボックスの末尾にドロップされます。
（appendChildなので、当たり前なのですが。。。）

例えば、右のボックスに下記のようにボックスを並べた後、
[1][2][3][4][5]
↓
[1][3][2][4][5]

このようにドロップされたボックスの間にドロップできるようにしたいです。

該当のソースコード

<style>
.left_box {
	width: 110px;
	height:700px;
	background:#fff;
	margin-right: 56px;
}

.drag_box {
	width: 100px;
	height: 30px;
	background: red;
	margin: 2px;
}

.right_box {
	background: #fff;
	height: 700px;
	width: 110px;
}

.drop_box {
	width:800px;
	height:38px;
	margin:2px;
	background:yellow;
	display: flex;
}
</style>

<!-- 左のボックス -->
<div style="display:flex;">
	<div class="left_box">
		<div class="delivery_place_box" id="leftBox" ondragover="dragover(event)" ondrop="dropBack(event)">
			<?php for ($i=1; $i < 21; $i++): ?>
				<div class="drag_box" id="numberBox<?php echo $i; ?>" draggable="true" ondragstart="f_dragstart(event)">
					ナンバー：<?php echo $i; ?>
				</div>
			<?php endfor; ?>
		</div>
	</div>


<!-- 右のボックス -->
	<div class="right_box">
		<?php $i=1; for($i=1; $i < 6; $i++): ?>
			<div id="setBox<?php echo $i; ?>" class="drop_box" ondragover="dragover(event)" ondrop="drop(event)">
			</div>
		<?php endfor; ?>
	</div>

</div>


<script>
	/***** ドラッグ開始時の処理 *****/
	function f_dragstart(event){
		//ドラッグするデータのid名をDataTransferオブジェクトにセット
		event.dataTransfer.effectAllowed = 'move';
		event.dataTransfer.setData("text", event.target.id);
	}

	/***** ドラッグ要素がドロップ要素に重なっている間の処理 *****/
	function dragover(event){
		event.dataTransfer.effectAllowed = 'move';
		//dragoverイベントをキャンセルして、ドロップ先の要素がドロップを受け付けるようにする
		event.preventDefault();
	}

	/***** 右のボックスにドロップ時の処理 *****/
	function drop(event){
		// ドラッグされたデータのid名をDataTransferオブジェクトから取得
		const boxId = event.dataTransfer.getData("text");
		const numberBox = document.getElementById(boxId);
		const setBox = event.currentTarget;
		setBox.appendChild(numberBox);
		// エラー回避のため、ドロップ処理の最後にdropイベントをキャンセルしておく
		event.preventDefault();
	};

	// 左の納品先にドロップする処理
	function dropBack(event){
	// エラー回避のため、ドロップ処理の最後にdropイベントをキャンセルしておく
		event.preventDefault();
	}
</script>

試したこと

下記のコードをfunction drop()に加えてドロップ先の要素に対してinsertBeforeを試してみたりしたのですが、うまくいきません。

setBox.insertBefore(numberBox, numberBox);

どうぞよろしくお願いします。

Answer 1

drag中のDOM要素とdroされるDOM要素を使って、insertBeforeで処理してください

• codepen

Comments

[yambejp]

こまかい挙動の調整するならjQuery-uiでやってください

[k_m_pg]

大変参考になりました！ありがとうございます！！