041-manual.html (1235B)
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 after new element is added to dragstore</title> 6 <script type="application/ecmascript"> 7 function start(event,element) 8 {event.dataTransfer.effectAllowed = 'copy'; 9 event.dataTransfer.addElement(document.querySelectorAll('canvas')[element]);} 10 </script> 11 </head> 12 <body> 13 <p> 14 <canvas width="100" height="100" draggable="true" ondragstart="start(event,1)">Canvas</canvas> 15 <canvas width="100" height="100" draggable="true" ondragstart="start(event,0)">Canvas</canvas> 16 </p> 17 <p>Try to drag canvas above. Feedback overlay should include both canvases and mouse pointer should be anchored in dragged ones center.</p> 18 <script type="application/ecmascript"> 19 var canvases = document.querySelectorAll('canvas'); 20 paintCanvas(canvases[0],'navy'); 21 paintCanvas(canvases[1],'green'); 22 function paintCanvas(canvas,color) 23 {var c = canvas.getContext('2d'); 24 for(var x = 0; x != 50; x++) 25 {c.fillStyle = (x%2 == 0)?color:'white'; 26 c.beginPath(); 27 c.moveTo(x,x); 28 c.lineTo(100-x,x); 29 c.lineTo(100-x,100-x); 30 c.lineTo(x,100-x); 31 c.closePath(); 32 c.fill();} 33 } 34 </script> 35 </body> 36 </html>