What is HTML5 Drag and Drop

In this article I have described about the Drag and Drop API is one of the most important part of HTML5 API.
  • 2557

Drag and Drop

  • Drag and Drop is very important and common feature to make any application more interactive and  become a part of HTML5 standard.
  • It makes easy to grab an item and drag the item to the different location.
  • Drag and drop is part of the standard In HTML5 that states that any element can be draggable.
  • Drag and drop is powerful User Interface concept which makes it easy to copy, reorder and deletion of items with the help of mouse clicks.
  • HTML 5 is supported by all the major browsers like Chrome, Firefox 3.5 and Safari 4 etc.

Note

  1. We have to set the draggable attribute to true to make an element draggable.

    <img draggable="true" / >
     
  2. The ondragover event specifies where the dragged data can be dropped.

Browser Support

Following are the browsers that support the Drag and Drop  element

  • Internet Explorer 9
  • Firefox
  • Chrome
  • Safari 5

Note - Drag and drop does not work in Safari 5.1.2.

Drag and Drop example

<title>Drag-n-Drop demo</title>
<style>
#mainText{color:blue}
#section1, #section3 {float:left; width:165px; height:165px; padding:20px; margin:10px}
#section1 { background-color: #00ff00; }
#section2 { background-color: #0ff000; }
#dragMe1, #dragMe2, #dragMe3 { width:100px; height:30px; padding:5px; margin:5px; }
</style>
<script type="text/javascript">
function dragStart(e) {
	e.dataTransfer.effectAllowed='move';
	e.dataTransfer.setData("Text", e.target.getAttribute('id'));
	e.dataTransfer.setDragImage(e.target,0,0);
	return true;
}
function dragEnd(e) {
	e.dataTransfer.clearData("Text");
	return true
}
function dragEnter(e) {
	var idelt = e.dataTransfer.getData("Text");
 	return true;
}
function dragOver(e) {
	var articleID = e.dataTransfer.getData("Text");
	var sectionId = e.target.getAttribute('id');
	if( articleID=="dragMe3" || sectionId == "section1" || (sectionId == "section2" && articleID == "dragMe1") ||
		(sectionId == "section3" && articleID == "dragMe2") )
		return false;
	else

		return true;
}
function dragDrop(e) {
	var idelt = e.dataTransfer.getData("Text");
	e.target.appendChild(document.getElementById(idelt));
	e.stopPropagation();
	return false; 
}
</script>
</head>
<body>
<h1>Example of Drag-n-drop </h1>
<article id="mainText"> <b>please select the text from box and drag them outside the box </b> </article>
<section id="section1" ondragenter="return dragEnter(event)" ondrop="return dragDrop(event)" ondragover="return dragOver(event)">
	<article id="dragMe1" draggable="true" ondragstart="return dragStart(event)" ondragend="return dragEnd(event)"><b>Drag The Following</b></article>
	<article id="dragMe2" draggable="true" ondragstart="return dragStart(event)" ondragend="return dragEnd(event)">mcn it solution</article>
	<article id="dragMe3" draggable="true" ondragstart="return dragStart(event)" ondragend="return dragEnd(event)">csharpcorner.com</article>
</section>
<section id="section3" ondragenter="return dragEnter(event)" ondrop="return dragDrop(event)" ondragover="return dragOver(event)"></section>
When we run this program the output is as follow 
fig1.jpg
When we select the items and drag them outside the box the output is as follow  
fig2.jpg

Further Readings

You may also want to read these related articles :

Ask Your Question 

Got a programming related question? You may want to post your question here

Programming Answers here

© 2019 DotNetHeaven. All rights reserved.