helper-drop-here-body-circle.xhtml (1269B)
1 <?xml version="1.0" encoding="utf-8"?> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>Cross frame drag and drop: helper file</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 </style> 13 <script type="application/ecmascript"> 14 var step = 1; 15 function enterPage(event) 16 {event.preventDefault(); 17 if(step++ > 0) 18 {setColor('green silver silver silver');} 19 else 20 {step = 0; 21 setColor('maroon'); 22 say('Dragenter should fire before dragover and drop');} 23 } 24 function overPage(event) 25 {event.preventDefault(); 26 if(step++ > 1) 27 {setColor('green green silver silver');} 28 else 29 {step = 0; 30 setColor('maroon'); 31 say('Dragover should fire after dragenter');} 32 } 33 function dropIt(event) 34 {if(step++ > 1) 35 {setColor('green');} 36 else 37 {step = 0; 38 setColor('maroon'); 39 say('Dragover should fire after dragenter');} 40 } 41 function say(it) 42 {document.querySelector('pre').appendChild(document.createTextNode(it + '\n'))} 43 function setColor(c) 44 {document.querySelector('div').setAttribute('style','border-color:' + c)} 45 </script> 46 </head> 47 <body ondragenter="enterPage(event)" ondragover="overPage(event)" ondrop="dropIt(event)"> 48 <div/> 49 <pre/> 50 </body> 51 </html>