041.xhtml - mozsearch

Enable keyboard shortcuts

<?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>