<div class="drop">
	<div id="drag" draggable="true" ondragstart="event.dataTransfer.setData('text/plain', null)">
		Drag me!
	</div>
</div>
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
* {
	box-sizing: border-box;
	font-family: sans-serif;
}

#drag {
	width: 200px;
	height: 25px;
	border-radius: 3px;
	background: black;
	color: white;
	display: grid;
	align-items: center;
	justify-content: center;
}

.drop {
	width: 220px;
	height: 45px;
	background: #2563EB;
	margin-bottom: 10px;
	padding: 10px;
	border-radius: 3px;
}
/* #2c41cc */
let dragged;
let listen = (...args) => document.addEventListener(...args);

listen('dragstart', event => {
	dragged = event.target;
}, false)

listen('dragover', event => event.preventDefault(), false);

listen('drop', event => {
	event.preventDefault();
	
	if (event.target.className === 'drop') {
		dragged.parentNode.removeChild(dragged);
		event.target.appendChild(dragged);
	}
}, false)

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.