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 :
<style type="text/css">
#destination {width:400px;height:70px;padding:10px;border:1px solid #000000; color:#000000;}


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;

function enableDrop(event)
event.preventDefault(); //supress the default behavior and allow the drop action to continue/complete.

function drag(event)
event.dataTransfer.setData("Text",; //text - type of the data ; 'source'


<div id="destination" ondrop="drop(event)"
ondragover="enableDrop(event)">drop the logo on to this box</div>

<img id="source" src="" draggable="true"
ondragstart="drag(event)" width="372" height="53">

Output :
drop the logo on to this box

© 2010 All rights reserved. |