Summer Training batches for B.Tech students are starting in may and june - Registration Open
Brand
(+91) - 78915-90002 - 97828-60519

Drag and Drop In HTML5

Drag and Drop In HTML5

In this tutorial, you will learn the most popular feature of HTML5 Drag and Drop. they’re in the tutorial you will learn how can we drag an element and how can we drop it into another element. Here we use simple javascript functions for this and some events in HTML code.

Some Steps About HTML Code:-

[step:1] Their in body part use a heading, two div elements and an image.
[step:2] Then give style in body, heading and div element.
[step:3] Now here we drag an image and drop into div element.
[step:4] So for this firstly do the image property draggable with value true.

Simple CSS:-

body{ background-color:#666;}


h2{ text-align:center; color:#fff;}

div{ float:left; width:150px; height:80px; padding:10px; margin:0 10px; border:1px solid #000; box-shadow:1px 1px 1px 1px #000}

HTML Code Start Here:-

<!DOCTYPE html>
<html lang="en">
<head>
<title>Html5 Drag and drop Tutorial by - Infonic Training</title>
<meta charset="utf-8">
<meta name="description" value="Drag and Drop is most popular feature in HTML5">
<meta name="keywords" value="Drag and Drop use in html5">

</head>
<body>

<h2>Drag The Infonic Image in This Div Element</h2>

<div>
<img src="infonic-logo.jpg" alt="logo" draggable="true">
</div>

<div> </div>

</body>
</html>

Some Steps About JS Code:-

[step:1] Then create a function drag(ev).
[step:2] The dataTransfer.setData() method sets the data type and the value of the dragged data.
[step:3] give id and Call a event ondragstart in image with function drag(event).
[step:4] By default, data/elements cannot be dropped in other elements. To allow a drop, we must prevent the default handling of the element.
[step:5] This is done by calling the event.preventDefault() method for the ondragover event. Here we call this in div element.
[step:6] When the dragged data is dropped, a drop event occurs. The ondrop attribute calls a function, drop(event).
[step:7] Get the dragged data with the dataTransfer.getData() method.
[step:8] This method will return any data that was set to the same type in the setData() method.
[step:9] The dragged data is the id of the dragged element (“dragimage”).
[step:10] Append the dragged element into the drop element.

JS Code Start Here:-

function drag(ev)
{
	ev.dataTransfer.setData("text",ev.target.id);
}

function allowDrop(ev)
{
	ev.preventDefault();
}

function drop(ev)
{ 
	
	var dropdata=ev.dataTransfer.getData("text");
	ev.target.appendChild(document.getElementById(dropdata));
}

Now Complete Code Of HTML File After Using CSS and JavaScript Events And Functions:-

<!DOCTYPE html>
<html lang="en">
<head>
<title>Html5 Drag and drop Tutorial by - Infonic Training</title>
<meta charset="utf-8">
<meta name="description" value="Drag and Drop is most popular feature in HTML5">
<meta name="keywords" value="Drag and Drop use in html5">

<style>
body{ background-color:#666;}


h2{ text-align:center; color:#fff;}

div{ float:left; width:150px; height:80px; padding:10px; margin:0 10px; border:1px solid #000; box-shadow:1px 1px 1px 1px #000}
</style>

<script>
function drag(ev)
{
	ev.dataTransfer.setData("text",ev.target.id);
}

function allowDrop(ev)
{
	ev.preventDefault();
}

function drop(ev)
{ 
	
	var dropdata=ev.dataTransfer.getData("text");
	ev.target.appendChild(document.getElementById(dropdata));
}
</script>

</head>
<body>

<h2>Drag The Infonic Image in This Div Element</h2>

<div ondragover="allowDrop(event)" ondrop="drop(event)">
<img id="dragimage" src="infonic-logo.jpg" alt="logo" draggable="true" ondragstart="drag(event)">
</div>

<div ondragover="allowDrop(event)" ondrop="drop(event)"></div>

</body>
</html>

Here You can also download its file and its more easy to understand you to how to drag and drop work in HTML5.
this tutorial is presented by Infonic Training.