024.xhtml (1100B)
1 <?xml version="1.0" encoding="utf-8"?> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>Link drag and drop: events after drag and drop is cancelled</title> 5 <style type="text/css"> 6 div 7 {width:0; 8 height:0; 9 border:solid 50px silver; 10 border-radius:50px;} 11 </style> 12 <script type="application/ecmascript"> 13 var result = true; 14 function dropIt(event) 15 {result = false; 16 setColor('maroon'); 17 say('drop event : FAIL (no drop should occur once drag and drop is cancelled)')} 18 function endDrag(event) 19 {if(result) 20 {setColor('teal')} 21 } 22 function say(it) 23 {document.querySelector('pre').appendChild(document.createTextNode(it + '\n'));} 24 function setColor(c) 25 {document.querySelector('div').setAttribute('style','border-color:' + c)} 26 </script> 27 </head> 28 <body dropzone="copy string:text/uri-list" ondrop="dropIt(event)"> 29 <p><a href="data:text/plain,1" ondragstart="setColor('teal silver silver silver')" ondragend="endDrag(event)">Drag me</a></p> 30 <p>Drag link and press Esc before you drop it. Circle below should turn green once drag and drop is cancelled.</p> 31 <div/> 32 <pre/> 33 </body> 34 </html>