Permalink
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> |