Downloaded 13 times
Uploaded byFramgia Vietnam
HTML5 DRAG AND DROP
Drag and drop is a common feature that allows objects to be dragged to different locations. In HTML5, any element can be draggable. The document provides examples of how to make an element draggable using draggable="true" and how to define what is dragged and where it can be dropped using ondragstart, setData(), ondragover, and ondrop event handlers. It also provides references for learning more about HTML5 drag and drop.
More Related Content
Similar to HTML5 DRAG AND DROP
HTML5 DRAG AND DROP
- 2.
- 3. Drag and dropis 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.
- 4. 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>
- 5. <body> <div id="div1" ondrop="drop(event)” ondragover="allowDrop(event)"></div> <imgid="drag1" src="img_logo.gif" draggable="true” ondragstart="drag(event)" width="336" height="69”> </body> </html>
- 6. To makean 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.
- 7. Where toDrop – 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).
- 8. Drag out anyof these links to your dekstop The basic game
- 9.
- 10. Contact: Nguyen Van Giang(Mr.) FramgiaINC 9F VietA building, Duy Tan street, Cau Giay district, Hanoi,Vietnam Mail: nguyen.van.giang@framgia.com Tel: 84 167 560 5976