Text Drag and Drop with Javascript

Simple example of drag and drop using javascript.

by Aqeel Malik

HTML

<script>
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));
}
</script>
<div id="box1" ondrop="drop(event)" ondragover="allowDrop(event)">
	<h1 id="drag" draggable="true" ondragstart="drag(event)">Pakistan</h1>
</div>
<div id="box2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div class="box" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

CSS

#box1,#box2{
	width: 250px;
	height: 250px;
	margin: 10px;
	border:1px solid;
	float: left;
	text-align:center;
	position: relative;
}
#drag{line-height:200px;cursor:pointer}