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.
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
- We have to set the draggable attribute to true to make an element draggable.
<img draggable="true" / >
- 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
When we select the items and drag them outside the box the output is as follow
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