Drag and Drop is strong UI concept through which user can easy to copy, reorder and deletion of items and contents with the help of mouse clicks.
HTML 5 came up with a Drag and Drop (DnD) API that brings native DnD support to the browser making it much easier to code up.
DnD provides properties and function by which we can easily performed required tasks.
Example:
<!DOCTYPE html>
<html>
<head>
<style type=”text/css”>
#boxA, #boxB {
padding: 10px;
margin: 10px;
}
#boxC {
background-color: red;
width: 75px;
height: 75px;
}
#boxA, #boxB {
padding: 10px;
margin: 10px;
background-color: yellow;
width: 150px;
height: 150px;
}
</style>
<script type=”text/javascript”>
//This function will be raised when user will move his mouse at object which he wants to move.
//ev is objects of draggable components.In our example that is boxC
function dragStarted(ev) {
// The move operation is used to indicate that the data being dragged will be moved, other operations also available like link and copy.
ev.dataTransfer.effectAllowed = ‘move’;
//Now in Set Data method first argument(‘Text’) is a data type, and second argument is to current draggable object
ev.dataTransfer.setData(“Text”, ev.target.id);
}
//This Event is called when user will take on drabble compont.
function dragOver(ev) {
//By Default all elements do not allow to put other element on them . As we are going to drop element on it so we have
// to make false this property by using preventDefault() method.
ev.preventDefault();
}
//This event is called when user will drop element on it.
function dropped(ev) {
ev.preventDefault();
//Get the data Type of source element.
var src = ev.dataTransfer.getData(“Text”);
//Append it
ev.target.appendChild(document.getElementById(src));
} </script>
</head>
<body>
<center>
<h2>Drag and drop HTML5 demo</h2>
<div>Try to move the purple box into the pink box.</div>
<div id=”boxA” ondrop=”dropped(event)” ondragover=”dragOver(event)”>BinA</div>
<div id=”boxB” ondrop=”dropped(event)” ondragover=”dragOver(event)”>BinB</div>
<hr />
<div id=”boxC” draggable=”true” ondragstart=”return dragStarted(event)”> <p>Drag Me</p> </div>
</center>
</body>
</html>