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