Ads Inside Post

Search in This Blog

Drag and Drop in html

Drag and Drop in html

<!DOCTYPE HTML>
<html>
<head>
<title>DRAG AND DROP </title>
<style type="text/css">
.box {width:300px
;height:350px;
border:3px solid #009966;}
</style><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>

</head><body>
<p>If you are human then Drag the image to the box </p>
<!--<div class="box" ondrop="drop(event)" ondragover="allowDrop(event)"></div>-->

<div class="box" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<br>
<img id="drag1"  src="alien.png" draggable="true" ondragstart="drag(event)" width="200" height="200">

<footer> Drag and Drop in html</footer>
</body>
</html>