009.xhtml (1309B)
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: allowed effects 'move','uninitialized'</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 </style> 17 <script type="application/ecmascript"> 18 var effects = ['move','uninitialized'], i = 0; 19 function selectText() 20 {document.querySelector('input').select()} 21 function dropSelection(event) 22 {event.target.appendChild(document.createTextNode((event.dataTransfer.dropEffect == 'move' && event.dataTransfer.effectAllowed == effects[i])?' PASS ':' FAIL ')); 23 i = (i + 1)%2; 24 selectText();} 25 function start(event) 26 {event.dataTransfer.effectAllowed = effects[i]; 27 event.dataTransfer.dropEffect = 'move'} 28 </script> 29 </head> 30 <body onload="selectText()"> 31 <p><input value="Drag me" ondragstart="start(event)"/></p> 32 <div ondragenter="event.preventDefault()" ondragover="return false" ondrop="dropSelection(event)"/> 33 <div ondragenter="event.preventDefault()" ondragover="return false" ondrop="dropSelection(event)"/> 34 <p>You should be able to drag selection and drop it onto any of the green boxes.</p> 35 </body> 36 </html>