014-1.xhtml (991B)
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 background-color:silver;} 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').replace(/\r\n$/,'')); 20 document.querySelector('div').appendChild(c);} 21 </script> 22 </head> 23 <body> 24 <p><img src="../resources/circle.png" alt="PNG circle" ondragstart="event.dataTransfer.effectAllowed = 'copy'"/></p> 25 <p>Drag circle from one frame to the silver box in <strong>another</strong> frame. 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>