001.xhtml (1382B)
1 <?xml version="1.0" encoding="utf-8"?> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>Removing canvas element during drag and drop</title> 5 <style type="text/css"> 6 div 7 {height:100px; 8 width:100px; 9 padding:20px; 10 background-color:silver;} 11 </style> 12 <script type="application/ecmascript"> 13 function addImage(event) 14 {var c = document.createElement('img'); 15 c.setAttribute('src',event.dataTransfer.getData('text/uri-list').replace(/\r\n$/,'')); 16 document.querySelector('div').appendChild(c);} 17 function start(event) 18 {event.dataTransfer.effectAllowed = 'copy'; 19 event.dataTransfer.setData('text/uri-list', document.querySelector('canvas').toDataURL('image/png')); 20 document.querySelector('p').removeChild(canvas);} 21 </script> 22 </head> 23 <body> 24 <p> 25 <canvas width="100" height="100" draggable="true" ondragstart="start(event)">Canvas</canvas> 26 </p> 27 <p>Drag canvas pattern to the silver box below and drop it. It should be copied to the box once you drop it there.</p> 28 <div ondragover="return false" ondrop="addImage(event)"/> 29 <script type="application/ecmascript"> 30 var canvas = document.querySelector('canvas'), 31 c = canvas.getContext('2d'); 32 for(var x = 0; x != 50; x++) 33 {c.fillStyle = (x%2 == 0)?'navy':'white'; 34 c.beginPath(); 35 c.moveTo(x,x); 36 c.lineTo(100-x,x); 37 c.lineTo(100-x,100-x); 38 c.lineTo(x,100-x); 39 c.closePath(); 40 c.fill();} 41 </script> 42 </body> 43 </html>