blob: 73e8c4dc3b7c538e76b5533c9121b00f37fa01ad (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
<?xml version="1.0" encoding="utf-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
<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>
|
