-
-
Save jesusninoc/3dd64b4318c99bc47b183d466e807392 to your computer and use it in GitHub Desktop.
Drag and Drop example in HTML5
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE HTML> | |
| <html> | |
| <head> | |
| <style type="text/css"> | |
| .dragClass { background-color: #FFFFFF; width:75px; height:75px;border:1px solid } | |
| .dropClass { background-color: #CCCCCC; width:350px; height:350px; } | |
| </style> | |
| <script type="text/javascript"> | |
| function dragStart(ev) { | |
| ev.dataTransfer.effectAllowed='move'; | |
| ev.dataTransfer.setData("Text", ev.target.getAttribute('id')); | |
| ev.dataTransfer.setDragImage(ev.target,0,0); | |
| return true; | |
| } | |
| function dragEnter(ev) { | |
| event.preventDefault(); | |
| return true; | |
| } | |
| function dragOver(ev) { | |
| return false; | |
| } | |
| function dragDrop(ev) { | |
| var src = ev.dataTransfer.getData("Text"); | |
| ev.target.appendChild(document.getElementById(src)); | |
| ev.stopPropagation(); | |
| return false; | |
| } | |
| </script> | |
| </head> | |
| <body> | |
| <center> | |
| <h2>Drag and drop HTML5 Example</h2> | |
| <div> | |
| <div id="objToBeDragged" class="dragClass" draggable="true" onDragStart="return dragStart(event)"> | |
| <p>Drag Me</p> | |
| </div> | |
| </div> | |
| <div id="objToBeDropped" class="dropClass" onDragEnter="return dragEnter(event)" | |
| onDrop="return dragDrop(event)" onDragOver="return dragOver(event)"> | |
| <p>Drop Here</p> | |
| </div> | |
| </center> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment