html5 drag and drop
DESCRIPTION
TRANSCRIPT
![Page 1: HTML5 DRAG AND DROP](https://reader036.vdocuments.us/reader036/viewer/2022082218/54bd18174a7959ff308b465b/html5/thumbnails/1.jpg)
HTML5 DRAG AND DROP
FRAMGIA 14/9/2013
![Page 2: HTML5 DRAG AND DROP](https://reader036.vdocuments.us/reader036/viewer/2022082218/54bd18174a7959ff308b465b/html5/thumbnails/2.jpg)
HTML5 DRAG AND DROP
Introduce Usage & Examples Demo References
![Page 3: HTML5 DRAG AND DROP](https://reader036.vdocuments.us/reader036/viewer/2022082218/54bd18174a7959ff308b465b/html5/thumbnails/3.jpg)
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.
![Page 4: HTML5 DRAG AND DROP](https://reader036.vdocuments.us/reader036/viewer/2022082218/54bd18174a7959ff308b465b/html5/thumbnails/4.jpg)
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>
![Page 5: HTML5 DRAG AND DROP](https://reader036.vdocuments.us/reader036/viewer/2022082218/54bd18174a7959ff308b465b/html5/thumbnails/5.jpg)
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>
![Page 6: HTML5 DRAG AND DROP](https://reader036.vdocuments.us/reader036/viewer/2022082218/54bd18174a7959ff308b465b/html5/thumbnails/6.jpg)
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.
![Page 7: HTML5 DRAG AND DROP](https://reader036.vdocuments.us/reader036/viewer/2022082218/54bd18174a7959ff308b465b/html5/thumbnails/7.jpg)
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).
![Page 8: HTML5 DRAG AND DROP](https://reader036.vdocuments.us/reader036/viewer/2022082218/54bd18174a7959ff308b465b/html5/thumbnails/8.jpg)
DEMO
Drag out any of these links to your dekstop
The basic game
![Page 9: HTML5 DRAG AND DROP](https://reader036.vdocuments.us/reader036/viewer/2022082218/54bd18174a7959ff308b465b/html5/thumbnails/9.jpg)
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
![Page 10: HTML5 DRAG AND DROP](https://reader036.vdocuments.us/reader036/viewer/2022082218/54bd18174a7959ff308b465b/html5/thumbnails/10.jpg)
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