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"
}
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("
ev.target.appendChild(
}
</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 class="box" ondrop="drop(event)" ondragover="allowDrop(event)">
<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>
<!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"
}
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("
ev.target.appendChild(
}
</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 class="box" ondrop="drop(event)" ondragover="allowDrop(event)">
<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>
Posts
0 comments:
Post a Comment