Source code

Revision control

Other Tools

<?xml version="1.0" encoding="utf-8"?>
<head>
<title>Cursor position and drag image after new element is added to dragstore</title>
<script type="application/ecmascript">
function start(event,element)
{event.dataTransfer.effectAllowed = 'copy';
event.dataTransfer.addElement(document.querySelectorAll('canvas')[element]);}
</script>
</head>
<body>
<p>
<canvas width="100" height="100" draggable="true" ondragstart="start(event,1)">Canvas</canvas>
<canvas width="100" height="100" draggable="true" ondragstart="start(event,0)">Canvas</canvas>
</p>
<p>Try to drag canvas above. Feedback overlay should include both canvases and mouse pointer should be anchored in dragged ones center.</p>
<script type="application/ecmascript">
var canvases = document.querySelectorAll('canvas');
paintCanvas(canvases[0],'navy');
paintCanvas(canvases[1],'green');
function paintCanvas(canvas,color)
{var c = canvas.getContext('2d');
for(var x = 0; x != 50; x++)
{c.fillStyle = (x%2 == 0)?color:'white';
c.beginPath();
c.moveTo(x,x);
c.lineTo(100-x,x);
c.lineTo(100-x,100-x);
c.lineTo(x,100-x);
c.closePath();
c.fill();}
}
</script>
</body>
</html>