| <!DOCTYPE html> |
| <html> |
| <meta name="viewport" content="width=device-width"> |
| <head> |
| <style> |
| body { |
| width: 100%; |
| height: 100%; |
| margin: 0; |
| } |
| |
| img { |
| width: 100px; |
| height: 100px; |
| } |
| |
| #target1 { |
| left: 0; |
| top: 200px; |
| } |
| |
| #target2 { |
| left: 200px; |
| top: 0; |
| } |
| |
| #target3 { |
| left: 200px; |
| top: 200px; |
| } |
| |
| .target { |
| position: absolute; |
| background-color: red; |
| border-radius: 50%; |
| width: 100px; |
| height: 100px; |
| color: white; |
| text-align: center; |
| line-height: 90px; |
| } |
| |
| #description { |
| padding-top: 250px; |
| display: block; |
| } |
| |
| #container { |
| position: relative; |
| } |
| </style> |
| </head> |
| |
| <body> |
| <div id="container"> |
| <img src="apple.gif"></img> |
| <div id="target1" class="target"></div> |
| <div id="target2" class="target"></div> |
| <div id="target3" class="target"></div> |
| <code id="description"> |
| <div>To test this manually, drag the image onto each of the three red circles.</div> |
| <div>Each red circle should turn green upon dragging over it.</div> |
| <div>Upon drop, the text "PASS" should appear in each target.</div> |
| </code> |
| </div> |
| </body> |
| |
| <script> |
| function elementAtMouseEvent(e) { |
| if (window.usePageCoordinates) |
| return document.elementFromPoint(e.pageX - pageXOffset, e.pageY - pageYOffset); |
| return document.elementFromPoint(e.clientX, e.clientY); |
| } |
| |
| function targetAtEvent(e) { |
| let target = elementAtMouseEvent(e); |
| return target && target.classList.contains("target") ? target : null; |
| } |
| |
| function resetTestState() { |
| target1.style.backgroundColor = ""; |
| target2.style.backgroundColor = ""; |
| target3.style.backgroundColor = ""; |
| target1.innerHTML = ""; |
| target2.innerHTML = ""; |
| target3.innerHTML = ""; |
| } |
| |
| document.body.addEventListener("dragstart", resetTestState); |
| document.body.addEventListener("dragenter", event => { |
| let target = targetAtEvent(event); |
| if (target) |
| target.style.backgroundColor = "green"; |
| event.preventDefault(); |
| }); |
| |
| document.body.addEventListener("dragover", event => { |
| let target = targetAtEvent(event); |
| if (target) |
| target.style.backgroundColor = "green"; |
| event.preventDefault(); |
| }); |
| |
| document.body.addEventListener("drop", event => { |
| let target = targetAtEvent(event); |
| if (target) |
| target.innerHTML = `<code>PASS</code>`; |
| event.preventDefault(); |
| }); |
| </script> |
| </html> |
