021.xhtml (1251B)
1 <?xml version="1.0" encoding="utf-8"?> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>Selection drag and drop: removing dropzone attribute ondragstart</title> 5 <style type="text/css"> 6 div 7 {display:inline-block; 8 vertical-align:top; 9 background-color:maroon; 10 color:white; 11 padding:20px; 12 width:100px; 13 height:100px;} 14 div:nth-child(2) 15 {background-color:purple;} 16 div:nth-child(3) 17 {background-color:fuchsia;} 18 </style> 19 <script type="application/ecmascript"> 20 function selectText() 21 {window.getSelection().selectAllChildren(document.querySelector('p'))} 22 function dropSelection(event,element) 23 {document.querySelectorAll('div')[element].appendChild(document.createTextNode(' FAIL ')); 24 selectText();} 25 function start(event) 26 {for(var i = 0; i != 3; i++) 27 {document.querySelectorAll('div')[i].removeAttribute('dropzone')} 28 } 29 </script> 30 </head> 31 <body onload="selectText()"> 32 <div ondrop="dropSelection(event,0)" dropzone="copy string:text/plain"/> 33 <div ondrop="dropSelection(event,1)" dropzone="move string:text/plain"/> 34 <div ondrop="dropSelection(event,2)" dropzone="link string:text/plain"/> 35 <p ondragstart="start(event)">Drag me</p> 36 <p>You should not be able to drop selection onto any of the red boxes above.</p> 37 </body> 38 </html>