JSFiddle - React, Tailwind, and code Playground

by J. Jones

HTML

<!DOCTYPE HTML>
<title>My Pre Store - Setup Sales Items</title>

<script>
function allowDrop(ev) { ev.preventDefault(); }
function drag(ev) { ev.dataTransfer.setData("Text",ev.target.id); }
function drop(ev) {
ev.preventDefault();
    alert("drop event looks like: " + ev );
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>

<body>
<center>
<p>Drag the image you want into a box!</p>

<table>
<tr>
<td><div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td>
<td><div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td>
<td><div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td>
</tr>
</table>

<img id="drag1" ondrop="drop(event)" draggable="true" width="150" height="150" ondragstart="drag(event)" src="http://netdna.webdesignerdepot.com/uploads/2013/02/thumbnail32.jpg" alt="img01"/></a>
<img id="drag2" ondrop="drop(event)" draggable="true" width="150" height="150" ondragstart="drag(event)" src="http://netdna.webdesignerdepot.com/uploads/html5-css3-wireframing/html5-logo.jpg" alt="img02"/></a>
<img id="drag3" ondrop="drop(event)" draggable="true" width="150" height="150" ondragstart="drag(event)"src="http://netdna.webdesignerdepot.com/uploads/2012/12/thumb-1.jpg" alt="img03"/></a>
</body>

CSS

<style type="text/css">
#div1 {width:200px;height:200px;padding:10px;border:1px solid #aaaaaa;}
#div2 {width:200px;height:200px;padding:10px;border:1px solid #aaaaaa;}
#div3 {width:200px;height:200px;padding:10px;border:1px solid #aaaaaa;}
</style>