| <?xml version="1.0" encoding="utf-8"?> |
| <html xmlns="http://www.w3.org/1999/xhtml"> |
| <head> |
| <title>Drag and drop of link from object</title> |
| <style type="text/css"> |
| div |
| {width:0; |
| height:0; |
| border:solid 50px silver; |
| border-radius:50px; |
| margin-left:auto;} |
| object |
| {width:100%; |
| height:300px; |
| border:solid medium navy;} |
| </style> |
| <script type="application/ecmascript"> |
| var step = 1; |
| function enterPage(event) |
| {event.preventDefault(); |
| if(step++ > 0) |
| {setColor('green silver silver silver');} |
| else |
| {step = 0; |
| setColor('maroon'); |
| say('Dragenter should fire before dragover and drop');} |
| } |
| function overPage(event) |
| {event.preventDefault(); |
| if(step++ > 1) |
| {setColor('green green silver silver');} |
| else |
| {step = 0; |
| setColor('maroon'); |
| say('Dragover should fire after dragenter');} |
| } |
| function dropIt(event) |
| {if(step++ > 1) |
| {setColor('green');} |
| else |
| {step = 0; |
| setColor('maroon'); |
| say('Dragover should fire after dragenter');} |
| } |
| function say(it) |
| {document.querySelector('pre').appendChild(document.createTextNode(it + '\n'))} |
| function setColor(c) |
| {document.querySelector('div').setAttribute('style','border-color:' + c)} |
| </script> |
| </head> |
| <body ondragenter="enterPage(event)" ondragover="overPage(event)" ondrop="dropIt(event)"> |
| <object type="application/xhtml+xml" data="helper-drag-me-link-with-circle.xhtml">XHTML document</object> |
| <div/> |
| <pre/> |
| </body> |
| </html> |