014.xhtml (1454B)
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 text input selection from object</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 object 13 {width:100%; 14 height:300px; 15 border:solid medium navy;} 16 </style> 17 <script type="application/ecmascript"> 18 var step = 1; 19 function enterPage(event) 20 {event.preventDefault(); 21 if(step++ > 0) 22 {setColor('green silver silver silver');} 23 else 24 {step = 0; 25 setColor('maroon'); 26 say('Dragenter should fire before dragover and drop');} 27 } 28 function overPage(event) 29 {event.preventDefault(); 30 if(step++ > 1) 31 {setColor('green green silver silver');} 32 else 33 {step = 0; 34 setColor('maroon'); 35 say('Dragover should fire after dragenter');} 36 } 37 function dropIt(event) 38 {if(step++ > 1) 39 {setColor('green');} 40 else 41 {step = 0; 42 setColor('maroon'); 43 say('Dragover should fire after dragenter');} 44 } 45 function say(it) 46 {document.querySelector('pre').appendChild(document.createTextNode(it + '\n'))} 47 function setColor(c) 48 {document.querySelector('div').setAttribute('style','border-color:' + c)} 49 </script> 50 </head> 51 <body ondragenter="enterPage(event)" ondragover="overPage(event)" ondrop="dropIt(event)"> 52 <object type="application/xhtml+xml" data="helper-drag-me-input-with-circle.xhtml">XHTML document</object> 53 <div/> 54 <pre/> 55 </body> 56 </html>