HTML5 DRAG AND DROP

1,165 views

Published on

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

  • Be the first to like this

No Downloads
Views
Total views
1,165
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

HTML5 DRAG AND DROP

  1. 1. Introduce Usage & Examples Demo References
  2. 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. 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. 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. 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. 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. 7. Drag out any of these links to your dekstop The basic game
  8. 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. 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

×