The drag-drop feature of HTML5 allows dragging of any document element and drop it to a separate location on the document.
HTML Example :
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#destination {width:400px;height:70px;padding:10px;border:1px solid #000000; color:#000000;}
</style>
</head>
<body>
<script>
function drop(event)
{
event.preventDefault(); //override the default behavior of browser opening up a link
var data=event.dataTransfer.getData("Text"); //text - type of the data
event.target.appendChild(document.getElementById(data));
}
function enableDrop(event)
{
event.preventDefault(); //supress the default behavior and allow the drop action to continue/complete.
}
function drag(event)
{
event.dataTransfer.setData("Text",event.target.id); //text - type of the data ; event.target.id= 'source'
}
</script>
</head>
<body>
<div id="destination" ondrop="drop(event)"
ondragover="enableDrop(event)">drop the generalconnection.com logo on to this box</div>
<img id="source" src="http://www.generalconnection.com/images/generalconnection_logo.jpg" draggable="true"
ondragstart="drag(event)" width="372" height="53">
</body>
</html>
