040-manual.html (973B)
1 <!DOCTYPE html> 2 <?xml version="1.0" encoding="utf-8"?> 3 <html xmlns="http://www.w3.org/1999/xhtml"> 4 <head> 5 <title>Cursor position and drag image</title> 6 <script type="application/ecmascript"> 7 function start(event) 8 {event.dataTransfer.effectAllowed = 'copy'; 9 event.dataTransfer.setDragImage(document.querySelector('canvas'), 50, 50);} 10 </script> 11 </head> 12 <body> 13 <p><a href="data:text/plain,1" ondragstart="start(event)">Drag me</a></p> 14 <p>Try to drag link above. Feedback overlay should be based on canvas below and mouse pointer should be anchored in its center.</p> 15 <p> 16 <canvas width="100" height="100">Canvas</canvas> 17 </p> 18 <script type="application/ecmascript"> 19 var canvas = document.querySelector('canvas'), 20 c = canvas.getContext('2d'); 21 for(var x = 0; x != 50; x++) 22 {c.fillStyle = (x%2 == 0)?'navy':'white'; 23 c.beginPath(); 24 c.moveTo(x,x); 25 c.lineTo(100-x,x); 26 c.lineTo(100-x,100-x); 27 c.lineTo(x,100-x); 28 c.closePath(); 29 c.fill();} 30 </script> 31 </body> 32 </html>