• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
HTML5 DRAG AND DROP
 

HTML5 DRAG AND DROP

on

  • 858 views

 

Statistics

Views

Total Views
858
Views on SlideShare
858
Embed Views
0

Actions

Likes
0
Downloads
1
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    HTML5 DRAG AND DROP HTML5 DRAG AND DROP Presentation Transcript

    • Introduce Usage & Examples Demo References
    • 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.
    •  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>
    • <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>
    •  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.
    •  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).
    • Drag out any of these links to your dekstop The basic game
    • http://www.w3schools.com/html/html5_ draganddrop.asp http://www.html5rocks.com/en/tutorials/ dnd/basics/ http://www.thecssninja.com/javascript/g mail-dragout
    • 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