Embed Size (px)
DESCRIPTION
Citation preview
HTML5 DRAG AND DROP
FRAMGIA 14/9/2013
HTML5 DRAG AND DROP
Introduce Usage & Examples Demo References
INTRODUCE Drag and drop is a very common
feature. It is when you "grab" an object and drag it to a different location.
In HTML5, drag and drop is part of the standard, and any element can be draggable.
USAGE Examples:
<html><head>
<script>function allowDrop(ev) { ev.preventDefault();}
function drag(ev) { ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev) { ev.preventDefault();
var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data));}
</script></head>
USAGE<body> <div id="div1" ondrop="drop(event)” ondragover="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true” ondragstart="drag(event)" width="336" height="69”></body></html>
USAGE To make an element draggable, set the
draggable attribute to true: <img draggable=“true”>
What to Drag - ondragstart and setData()function drag(ev) {
ev.dataTransfer.setData("Text",ev.target.id);
} The dataTransfer.setData() method sets the data type and the value of the dragged data.
USAGE Where to Drop – ondragover
function allowDrop(ev) { ev.preventDefault();
}
The ondragover event specifies where the dragged data can be dropped. Do the Drop – ondrop function drop(ev) { var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); } In the example above, the ondrop attribute calls a function, drop(event).
DEMO
Drag out any of these links to your dekstop
The basic game
REFERENCES http://www.w3schools.com/html/
html5_draganddrop.asp http://www.html5rocks.com/en/tutoria
ls/dnd/basics/
http://www.thecssninja.com/javascript/gmail-dragout
THANK YOU FOR LISTENING!
Contact: Nguyen Van Giang(Mr.)Framgia INC9F VietA building, Duy Tan street, Cau Giay district, Hanoi, VietnamMail: [email protected]: 84 167 560 5976
