030.xhtml (903B)
1 <?xml version="1.0" encoding="utf-8"?> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>SVG 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="030-1.svg" 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>