chromium/chrome/test/data/chromedriver/drag_and_drop.svg

<?xml version='1.0' standalone='no'?>
<!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 20001102//EN'
    'http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd'>
<svg width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'
    onload='Init(evt)'
    onmousedown='Grab(evt)'
    onmousemove='Drag(evt)'
    onmouseup='Drop(evt)'>

  <title>Drag And Drop</title>

  <script><![CDATA[
      var SVGDocument = null;
      var SVGRoot = null;

      var TrueCoords = null;
      var GrabPoint = null;
      var DragTarget = null;

      function Init(evt)
      {
         SVGDocument = evt.target.ownerDocument;
         SVGRoot = SVGDocument.documentElement;
         TrueCoords = SVGRoot.createSVGPoint();
         GrabPoint = SVGRoot.createSVGPoint();
      }

      function Grab(evt)
      {
         var targetElement = evt.target;
         DragTarget = targetElement;
         DragTarget.parentNode.appendChild( DragTarget );
         DragTarget.setAttributeNS(null, 'pointer-events', 'none');
         var transMatrix = DragTarget.getCTM();
         GrabPoint.x = TrueCoords.x - Number(transMatrix.e);
         GrabPoint.y = TrueCoords.y - Number(transMatrix.f);
      };


      function Drag(evt)
      {
         GetTrueCoords(evt);
         if (DragTarget)
         {
            var newX = TrueCoords.x - GrabPoint.x;
            var newY = TrueCoords.y - GrabPoint.y;
            DragTarget.setAttributeNS(null, 'transform', 'translate(' + newX + ',' + newY + ')');
         }
      };


      function Drop(evt)
      {
         if ( DragTarget )
         {
            var targetElement = evt.target;
            DragTarget.setAttributeNS(null, 'pointer-events', 'all');
            if ( 'Folder' == targetElement.parentNode.id )
            {
               targetElement.parentNode.appendChild( DragTarget );
               alert(DragTarget.id + ' has been dropped into a folder.');
            }
            DragTarget = null;
         }
      };


      function GetTrueCoords(evt)
      {
         var newScale = SVGRoot.currentScale;
         var translation = SVGRoot.currentTranslate;
         TrueCoords.x = (evt.clientX - translation.x)/newScale;
         TrueCoords.y = (evt.clientY - translation.y)/newScale;
      };

   ]]></script>

  <rect id='GreenRectangle' x='50' y='70' width='100' height='100' style='fill:green; '/>

  <g id='Folder'>
    <rect id='FolderRectangle' x='300' y='100' width='200' height='150' style='fill:tan; stroke:brown; stroke-width:3;'/>
  </g>

</svg>