helper-drop-image-here.xhtml (738B)
1 <?xml version="1.0" encoding="utf-8"?> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>Image drag and drop: helper file</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 } 14 </style> 15 <script> 16 function addImage(event) { 17 var c = document.createElement('img'); 18 c.setAttribute('src', event.dataTransfer.getData('text/uri-list').replace(/\r\n$/, '')); 19 document.querySelector('div').appendChild(c); 20 } 21 </script> 22 </head> 23 <body> 24 <div ondragenter="event.preventDefault()" ondragover="return false" ondrop="addImage(event)"></div> 25 </body> 26 </html>