For smart Primates & ROBOTS (oh and ALIENS ).

Blogroll

Friday, August 30, 2013

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>
Share:

0 comments:

Post a Comment

Multiple attribute passing in querySelectorAll

Multiple attribute passing in querySelectorAll     Here I am demonstrating code to how to pass multiple attributes in querySelectorAll. <...

Ads Inside Post

Powered by Blogger.

Arsip