mirror of
https://github.com/classilla/tenfourfox.git
synced 2026-04-19 06:25:12 +00:00
Cameron Kaiser
35 lines
1.2 KiB
HTML
35 lines
1.2 KiB
HTML
<?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> |