004.xhtml (1560B)
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 selection to 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:500px;} 15 </style> 16 <script type="application/ecmascript"> 17 var step = 1; 18 function start(event) 19 {if(step++ == 1) 20 {setColor('green silver silver silver');} 21 else 22 {step = 0; 23 setColor('maroon'); 24 say('Dragstart should be first event to fire.')} 25 } 26 function leavePage(event) 27 {if(step++ > 1) 28 {setColor('green green silver silver')} 29 else 30 {step = 0; 31 setColor('maroon'); 32 say('Dragleave should fire after dragstart.')} 33 } 34 function endDrag(event) 35 {if(step++ > 2) 36 {setColor('green')} 37 else 38 {step = 0; 39 setColor('maroon'); 40 say('Dragend should fire after dragstart and dragleave.')} 41 } 42 function say(it) 43 {document.querySelector('pre').appendChild(document.createTextNode(it + '\n'))} 44 function setColor(c) 45 {document.querySelector('div').setAttribute('style','border-color:' + c)} 46 </script> 47 </head> 48 <body onload="window.getSelection().selectAllChildren(document.querySelector('p'))" ondragleave="leavePage(event)"> 49 <p ondragstart="start(event)" ondragend="endDrag(event)">Drag me</p> 50 <p>Drag selected text to the frame below and drop it there. Both circles should turn green once text is dropped into lower frame.</p> 51 <div/> 52 <pre/> 53 <iframe src="helper-drop-here-body-circle.xhtml">XHTML document</iframe> 54 </body> 55 </html>