JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<div class="container" id="container">
	<div class="row">
		<div class="col-md-offset-3 col-md-5">	
			<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
				<img id="drag1" src="http://www.w3schools.com/html/img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69" />
			</div>
		</div>
		<div class="col-md-6">	
			<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
				<img id="drag2" src="http://jqueryui.com/jquery-wp-content/themes/jquery/content/books/jquery-ui-in-action.jpg" draggable="true" ondragstart="drag(event)" width="336" height="69" />
			</div>
		</div>
		<div class="col-md-6">
			<div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
		</div>
		<div class="col-md-6">	
			<div id="div4" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
		</div>
		<div class="col-md-6">
			<div id="div5" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
		</div>
	</div>
 
</div>

CSS

div
		{
			margin-bottom:10px;
			height:100px;
		}
		.container
		{
			height:500px;
		}
		.col-md-6,.col-md-5
		{
			border:1px solid #000;
		}
		#div1,#div2,#div3,#div4,#div5 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}

JavaScript

function allowDrop(ev) {
		ev.preventDefault();
	}

	function drag(ev) {
		ev.dataTransfer.setData("text", ev.target.id);
	}

	function drop(ev) {
		ev.preventDefault();
		var data = ev.dataTransfer.getData("text");
       
       if(ev.target.tagName!="IMG"){
		ev.target.appendChild(document.getElementById(data));
}
else{
var _oldDiv= document.getElementById(data).parentNode,
_oldData= document.getElementById(data),

_newDiv=ev.target.parentNode,
_newData=ev.target;

_oldDiv.appendChild(_newData);
_newDiv.appendChild(_oldData);

}

	}