JSFiddle - React, Tailwind, and code Playground

HTML

<div>
			<fieldset id="shop" class="draggableContainer">
				<legend>Draggable component</legend>
				<img class="component" id="1" src="image/1.jpg"> <img
					class="component" id="2" src="image/2.jpg"> <img
					class="component" id="3" src="image/3.jpg"> <img
					class="component" id="4" src="image/4.jpg">
			</fieldset>
		</div>

		<div>
			<fieldset>
				<legend>dropZone</legend>
				<div class="dropZone" id="dropZone"></div>
			</fieldset>
		</div>

CSS

body {
	padding: 40px;
}

.draggableContainer {
	border-radius: 6px;
}


.component {
	border: 3px solid white;
}

.component:hover {
	border: 3px solid red;
	cursor: move;
}

#dropArea {
	position: relative;
	height: 200px;
	width: 100%;
	float: left;
	border: 1px dotted #999;
}


.dropZone {
	width:100%;
	height:100px
}

JavaScript

var dropArea = document.querySelector('#dropZone');

var conponents = document.querySelectorAll('.component');
for ( var i = 0; i < conponents.length; i++) {
	conponents[i].setAttribute('draggable', 'true');
	conponents[i].addEventListener('dragstart', function(evnt) {
		evnt.dataTransfer.effectAllowed = 'copy';
		evnt.dataTransfer.setData('text', this.id);
		return false;
	}, false);
}

dropArea.addEventListener('dragover', function(evnt) {
	if (evnt.preventDefault)
		evnt.preventDefault();
	evnt.dataTransfer.dropEffect = 'copy';
	return false;
}, false);


dropArea.addEventListener('drop', function(evnt) {
	if (evnt.stopPropagation)
		evnt.stopPropagation();
	var id = evnt.dataTransfer.getData('text');
	var theitem = document.getElementById(id);

	if (theitem == null) {
		evnt.preventDefault();
		return;
	}
	var y = document.createElement('img');
	y.src = theitem.src;
	dropArea.appendChild(y);
	evnt.preventDefault(); // for Firefox
	return false;
}, false);