023.xhtml (1370B)
1 <?xml version="1.0" encoding="utf-8"?> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>drofEffect after drop event is cancelled</title> 5 <style type="text/css"> 6 div 7 {display:inline-block; 8 vertical-align:top; 9 background-color:olive; 10 color:white; 11 padding:20px; 12 width:100px; 13 height:100px;} 14 div:nth-child(2) 15 {background-color:green;} 16 div:nth-child(3) 17 {background-color:teal;} 18 </style> 19 <script type="application/ecmascript"> 20 var effects = ['copy','move','link'], result = false, e = 0; 21 function selectText() 22 {window.getSelection().selectAllChildren(document.querySelector('p'))} 23 function dropSelection(event,element) 24 {event.preventDefault(); 25 e = element; 26 if(event.dataTransfer.dropEffect == effects[element]) 27 {result = true} 28 selectText();} 29 function endDrag(event) 30 {document.querySelectorAll('div')[e].appendChild(document.createTextNode((result && event.dataTransfer.dropEffect == effects[e])?' PASS ':' FAIL '));} 31 </script> 32 </head> 33 <body onload="selectText()"> 34 <div ondrop="dropSelection(event,0)" dropzone="copy string:text/plain"/> 35 <div ondrop="dropSelection(event,1)" dropzone="move string:text/plain"/> 36 <div ondrop="dropSelection(event,2)" dropzone="link string:text/plain"/> 37 <p ondragend="endDrag(event)">Drag me</p> 38 <p>You should be able to drag selection and drop it onto any of the green boxes.</p> 39 </body> 40 </html>