#techno: How to use drag and drop in a webpage using HTML and JS

Wednesday, June 11, 2014

How to use drag and drop in a webpage using HTML and JS

HTML5 is the latest version of HTML it has capability to deliver rich internet applications without using any additional plugins.So we can make hi-end web applications using HTML5.HTML5 is cross-platform so that work with different devices.

This tutorial will teach you how to use drag and drop feature of HTML5 to drag an object (say image) from one place to other in a web page.

Step 1:#createfile

Create the html file.

Open notepad and type the codes as given below:

<!DOCTYPE HTML>
<html>
<head>
<style>
p {font-family: "Times New Roman";font-size: 20px;}
#divbox {width:350px;height:70px;padding:10px;border:5px solid #aaaaaa;}
</style>
<script>
function DropPermission(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>Drag the helloworld image into the rectangle:</p>

<div id="divbox" ondrop="drop(event)" ondragover="DropPermission(event)"></div>
<br>
<img id="drag1" src="hello.jpg" draggable="true" ondragstart="drag(event)" width="336" height="69">

</body>
</html>