HTML5 - Introduction
HTML5 - New Elements
HTML5 - Removed Elements
HTML5 - Browser Check
Tag Name : drag-drop
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>
Output :
drop the generalconnection.com logo on to this box

© 2010 www.generalconnection.com. All rights reserved. | www.generalconnection.com