020.xhtml (1196B)
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: setting dropzone attribute ondragstart</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']; 21 function dropSelection(event,element) 22 {document.querySelectorAll('div')[element].appendChild(document.createTextNode((event.dataTransfer.dropEffect == effects[element])?' PASS ':' FAIL '));} 23 function start(event) 24 {for(var i = 0; i != 3; i++) 25 {document.querySelectorAll('div')[i].setAttribute('dropzone',effects[i] + ' string:text/uri-list')} 26 } 27 </script> 28 </head> 29 <body> 30 <div ondrop="dropSelection(event,0)"/> 31 <div ondrop="dropSelection(event,1)"/> 32 <div ondrop="dropSelection(event,2)"/> 33 <p ondragstart="start(event)"><a href="data:text/plain,1" ondragstart="start(event)">Drag me</a></p> 34 <p>You should be able to drag link and drop it onto any of the green boxes.</p> 35 </body> 36 </html>