023.xhtml (1196B)
1 <?xml version="1.0" encoding="utf-8"?> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>Text input selection 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 selectText() 15 {document.querySelector('input').select()} 16 function dropIt(event) 17 {result = false; 18 setColor('maroon'); 19 say('drop event : FAIL (no drop should occur once drag and drop is cancelled)')} 20 function endDrag(event) 21 {if(result) 22 {setColor('teal')} 23 } 24 function say(it) 25 {document.querySelector('pre').appendChild(document.createTextNode(it + '\n'));} 26 function setColor(c) 27 {document.querySelector('div').setAttribute('style','border-color:' + c)} 28 </script> 29 </head> 30 <body onload="selectText()" dropzone="copy string:text/plain" ondrop="dropIt(event)"> 31 <p><input value="Drag me" ondragstart="setColor('teal silver silver silver')" ondragend="endDrag(event)"/></p> 32 <p>Drag selected text and press Esc before you drop it. Circle below should turn green once drag and drop is cancelled.</p> 33 <div/> 34 <pre/> 35 </body> 36 </html>