031.xhtml (1169B)
1 <?xml version="1.0" encoding="utf-8"?> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>SVG dataURL image drag and drop</title> 5 <style type="text/css"> 6 div[ondragenter] 7 {width:105px; 8 min-height:105px; 9 text-align:center; 10 margin-top:20px; 11 padding:10px; 12 border:solid thin navy;} 13 p:first-child 14 {padding-left:12px;} 15 </style> 16 <script type="application/ecmascript"> 17 function addImage(event) 18 {var c = document.createElement('img'); 19 c.setAttribute('src',event.dataTransfer.getData('text/uri-list')); 20 document.querySelector('div').appendChild(c);} 21 </script> 22 </head> 23 <body> 24 <p><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20version%3D%221.1%22%20width%3D%22100px%22%20height%3D%22100px%22%20viewBox%3D%220%200%20100%20100%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22green%22/%3E%3C/svg%3E" alt="SVG circle" ondragstart="event.dataTransfer.effectAllowed = 'copy'"/></p> 25 <p>Drag circle above to the box below. It should be copied to the box once you drop it there.</p> 26 <div 27 ondragenter="event.preventDefault()" 28 ondragover="return false" 29 ondrop="addImage(event)" 30 /> 31 </body> 32 </html>