012.xhtml (1379B)
1 <?xml version="1.0" encoding="utf-8"?> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>Drag and drop of link from iframe</title> 5 <style type="text/css"> 6 div 7 {width:0; 8 height:0; 9 border:solid 50px silver; 10 border-radius:50px; 11 margin-left:auto;} 12 iframe 13 {width:100%; 14 height:300px;} 15 </style> 16 <script type="application/ecmascript"> 17 var step = 1; 18 function enterPage(event) 19 {event.preventDefault(); 20 if(step++ > 0) 21 {setColor('green silver silver silver');} 22 else 23 {step = 0; 24 setColor('maroon'); 25 say('Dragenter should fire before dragover and drop');} 26 } 27 function overPage(event) 28 {event.preventDefault(); 29 if(step++ > 1) 30 {setColor('green green silver silver');} 31 else 32 {step = 0; 33 setColor('maroon'); 34 say('Dragover should fire after dragenter');} 35 } 36 function dropIt(event) 37 {if(step++ > 1) 38 {setColor('green');} 39 else 40 {step = 0; 41 setColor('maroon'); 42 say('Dragover should fire after dragenter');} 43 } 44 function say(it) 45 {document.querySelector('pre').appendChild(document.createTextNode(it + '\n'))} 46 function setColor(c) 47 {document.querySelector('div').setAttribute('style','border-color:' + c)} 48 </script> 49 </head> 50 <body ondragenter="enterPage(event)" ondragover="overPage(event)" ondrop="dropIt(event)"> 51 <iframe src="helper-drag-me-link-with-circle.xhtml">XHTML document</iframe> 52 <div/> 53 <pre/> 54 </body> 55 </html>