JSFiddle - React, Tailwind, and code Playground

by mvasko

HTML

<body>

		<div id="container">

			<div id="header">
				<h1 style="margin-bottom:0;">Main Title of Web Page</h1>
			</div>

			<div id="menu">
				<canvas id="myCanvas">


				</canvas>
			</div>

			<div id="content">
				<p>Drag the W3Schools image into the rectangle:</p>

            <div id="div1" ondrop="drop(event)"         ondragover="allowDrop(event)"></div>
                <br>
                <img id="drag1" src="http://img3.wikia.nocookie.net/__cb20110512193121/lego/images/f/f9/50px-LEGO_Logo_svg.png" draggable="true" ondragstart="drag(event)" width="50px" height="50px">
			</div>

			<div id="footer">
				Copyright © vaskom
			</div>

		</div>

CSS

#container{
	width:800px;
	height:auto;
	}
#header{
	width:500px;
	height:50px;
	background-color:#FFA500;
	}
#menu{
	width:100px;
	height:300px;
	background-color:#FFD700;
	float:left;
	}
#myCanvas{
    width:100px;
    height:300px
}
#content{
	width:500px;
	height:300px;
	background-color:#EEEEEE;
	float:left;
	}
#footer{
	width:500px;
	height:50px;
	background-color:#FFA500;
	clear:both;
	text-align:center;
	}
#div1 {
    width:75px;
    height:75px;
    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");
ev.target.appendChild(document.getElementById(data));
}