JavaScript - ドラッグ & ドロップイベント

JavaScriptで要素のドラッグ＆ドロップイベントを実装する簡単なコード例です。

HTMLには、要素のドラッグ＆ドロップイベントを検出する対象として<div>タグにid名「target」を指定しています。
また、ドロップ可能エリアとしてクラス名「drop-area」を指定した要素を複数設置しています。

<div class="drop-area">
	<div id="target" class="circle" draggable="true"></div>
</div>
<div class="drop-area"></div>
<div class="drop-area"></div>

CSSでは、要素のドラッグ＆ドロップイベントの対象範囲とするためターゲットとドロップエリアのサイズを設定しています。

.area,.drop-area {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 120px;
	height: 120px;
	border: solid 1px #FFF;
	margin:10px;
}

.circle {
	width: 100px;
	height: 100px;
	background: #ff69b4;
	border-radius: 50%;
	cursor: pointer;
}

addEventListener()の「dragstart」を使って要素のドラッグ開始イベントを実装します。
ドラッグ開始イベントでは「event.dataTransfer」にドラッグした要素を設定します。

「dragover」でのイベントでは、ドロップ処理を実行するために、デフォルトの動作を実行しないようにしておく必要があります。

「drop」のイベントでは「event.dataTransfer.getData('text')」でドラッグ中の要素に設定されている「id」を取得、要素を特定しています。
event.target.appendChild()にてドロップエリアに要素を移動させています。

// ドロップエリア
let dropArea = document.querySelectorAll('.drop-area');

// ドラッグ開始
document.querySelector('#target').addEventListener('dragstart', () => {
	// ドラッグした要素を設定
	event.dataTransfer.setData('text', event.target.id);
});

// ドロップ
dropArea.forEach(element => {

	element.addEventListener('dragover', () => {
		// デフォルトの動作を実行しない
		event.preventDefault();
	});

	element.addEventListener('drop', () => {
		// デフォルトの動作を実行しない
		event.preventDefault();
		// ドラッグした要素を取得
		const dropItem = document.querySelector('#' + event.dataTransfer.getData('text'));
		// ドラッグした要素を移動
		event.target.appendChild(dropItem);
	});
});