Permalink
Cannot retrieve contributors at this time
Join GitHub today
GitHub is home to over 28 million developers working together to host and review code, manage projects, and build software together.
Sign up
Fetching contributors…
Cannot retrieve contributors at this time
| <html> | |
| <head> | |
| <style type="text/css"> | |
| #Seed { | |
| background: url('https://farm3.staticflickr.com/2796/4083582112_f13870f7bc.jpg'); | |
| background-position: center; | |
| width:350px; | |
| height:250px; | |
| font-size:18px; | |
| text-align: right; | |
| position: absolute; | |
| left: 60px; | |
| top: 350px; | |
| } | |
| #Dirt { | |
| background: url('https://www.mediabistro.com/fishbowldc/files/2010/10/dirt-pile.jpg'); | |
| background-position: center; | |
| width:450px; | |
| height:200px; | |
| padding:8px; | |
| font-size:18px; | |
| text-align:right; | |
| } | |
| </style> | |
| <script type="text/javascript" src="jquery".js></script> | |
| <script type="text/javascript"> | |
| var isPlanted = false; | |
| function appStatus(msg){ | |
| document.getElementById('app_status').innerHTML = msg; | |
| } | |
| // "e" represents the drag event in question for each drag function | |
| var count1=0; | |
| do{ | |
| function drag_start(e) { | |
| appStatus("Dragging the "+e.target.getAttribute('id')); | |
| e.dataTransfer.dropEffect='move'; | |
| e.dataTransfer.setData("text/plain", e.target.getAttribute('id')); | |
| } | |
| function drag_enter(e) { | |
| appStatus("You are dragging the "+element+" over the "+e.target.getAttribute('id')); | |
| } | |
| function drag_leave(e) { | |
| appStatus("You left the "+e.target.getAttribute('id')); | |
| } | |
| function drag_drop(e) { | |
| e.preventDefault(); | |
| var element = e.dataTransfer.getData("Text"); | |
| appStatus("Dropped "+element+" into the "+e.target.getAttribute('id')); | |
| e.target.appendChild(document.getElementById(element)); | |
| isPlanted = true; | |
| } | |
| function drag_end(e) { | |
| var status = document.getElementById('app_status'); | |
| if(isPlanted == false){ | |
| appStatus("You let the "+e.target.getAttribute('id')+" go."); | |
| } | |
| if(isPlanted == true){ | |
| count1++; | |
| alert("You have planted " + count1 + " tree(s)"); | |
| isPlanted=false; | |
| } | |
| } | |
| }while(count>0) | |
| </script> | |
| </head> | |
| <body> | |
| <h2>Come help us plant some trees!</h2> | |
| <h3 id="app_status">Seed ready to be planted...</h3> | |
| <div id="Dirt" ondragenter="drag_enter(event)" ondrop="drag_drop(event)" ondragover="return false" ondragleave="drag_leave(event)" > | |
| Dirt | |
| </div> | |
| <hr /> | |
| <div id="Seed" draggable="true" ondragstart="drag_start(event)" ondragend="drag_end(event)"> | |
| Seed | |
| </div> | |
| </br> | |
| </br> | |
| </br> | |
| </br> | |
| </br> | |
| </br> | |
| </br> | |
| </br> | |
| </br> | |
| </br> | |
| </br> | |
| </br> | |
| </br> | |
| </br> | |
| </br> | |
| </br> | |
| </body> | |
| </html> |