helper-drag-me-input-with-circle.xhtml (1432B)
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 start(event) 16 {if(step++ == 1) 17 {setColor('green silver silver silver');} 18 else 19 {step = 0; 20 setColor('maroon'); 21 say('Dragstart should be first event to fire.')} 22 } 23 function leavePage(event) 24 {if(step++ > 1) 25 {setColor('green green silver silver')} 26 else 27 {step = 0; 28 setColor('maroon'); 29 say('Dragleave should fire after dragstart.')} 30 } 31 function endDrag(event) 32 {if(step++ > 2) 33 {setColor('green')} 34 else 35 {step = 0; 36 setColor('maroon'); 37 say('Dragend should fire after dragstart and dragleave.')} 38 } 39 function say(it) 40 {document.querySelector('pre').appendChild(document.createTextNode(it + '\n'))} 41 function setColor(c) 42 {document.querySelector('div').setAttribute('style','border-color:' + c)} 43 </script> 44 </head> 45 <body onload="document.querySelector('input').select()" ondragleave="leavePage(event)"> 46 <p ondragstart="start(event)" ondragend="endDrag(event)"><input value="Drag me"/></p> 47 <p>Drag selected text out of frame and drop it somewhere on the page. Both circles should turn green once text is dropped.</p> 48 <div/> 49 <pre/> 50 </body> 51 </html>