JSFiddle - React, Tailwind, and code Playground

HTML

<body>

    <div id="moveto" draggable="true"><p>Item</p></div>
    <div id="movein"><b>Target</b></div>

</body>

CSS

#moveto, 
#movein {
	float:left;
	padding:10px;
	margin:10px;
	border: none;
}

#moveto {
	background-color: #ccc;
	margin-right: 25px;
	border-radius: 5px;
	text-align: center;
	cursor: move;
	height: 100px;
	width: 110px;
}

#movein {
	background-color: green;
	margin-right: 25px;
	border-radius: 5px;
	text-align: center;
	cursor: move;
	width:150px;
	height:150px;
}

JavaScript

moveto = document.getElementById('moveto');

moveto.addEventListener('dragstart', dragStart, false);
moveto.addEventListener('dragend', dragEnd, false);

movein = document.getElementById('movein');

movein.addEventListener('dragenter', dragEnter, false);
movein.addEventListener('dragover', dragOver, false);
movein.addEventListener('dragleave', dragLeave  , false);
movein.addEventListener('drop', drop, false);

function dragStart(e) {
	e.dataTransfer.effectsAllowed = "move";
	e.dataTransfer.setData('text/html', "e.target.getAttribute('id'))");
	e.target.style.border = "1px solid black";
}

function dragEnd(e) {
	e.target.style.border = "none";
}

function dragEnter(e) {
	e.target.style.border = "1px solid black";
}

function dragOver(e) {
	e.preventDefault();
	return false;
}

function dragLeave(e) {
	e.target.style.border = "none";
}

function drop(e) {
	e.target.style.border = "none";
	var data = e.dataTransfer.getData('text/html');
	e.preventDefault();
	return false;
}