Your SlideShare is downloading. ×

HTML5 DRAG AND DROP

787

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
787
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Introduce Usage & Examples Demo References
  • 2. 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.
  • 3.  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>
  • 4. <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>
  • 5.  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.
  • 6.  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).
  • 7. Drag out any of these links to your dekstop The basic game
  • 8. http://www.w3schools.com/html/html5_ draganddrop.asp http://www.html5rocks.com/en/tutorials/ dnd/basics/ http://www.thecssninja.com/javascript/g mail-dragout
  • 9. Contact: Nguyen Van Giang(Mr.) Framgia INC 9F VietA building, Duy Tan street, Cau Giay district, Hanoi,Vietnam Mail: nguyen.van.giang@framgia.com Tel: 84 167 560 5976

×