SVG学习之拖拽

SVG要实现拖拽功能，主要依靠的是鼠标的mousedown、mouseup和mousemove事件，mousedown按下的时候判断是否选取到SVG元素，并定义变量保存该元素，以备之后用到；mouseup主要是拖拽完之后对事件的处理，例如，我想拖拽完之后将坐标保存到数据库，或是拖拽完之后弹出提示等；mousemove主要是改变选取元素的坐标；图像整体的放大缩小由滚轮操作，不用定义即可实现，

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'
   οnlοad='Init(evt)'   οnmοusedοwn='Grab(evt)'    οnmοusemοve='Drag(evt)'
   οnmοuseup='Drop(evt)'>
   <title>Drag And Drop</title>
   <desc>
      A nice little demo of drag-and-drop functionality in SVG,
      written by Doug Schepers on February 16, 2004.
      Use or misuse this code however you wish.
   </desc>
   <script type="text/javascript"><![CDATA[
      var SVGDocument = null;
      var SVGRoot = null;
      var TrueCoords = null;
      var GrabPoint = null;
      var BackDrop = null;
      var DragTarget = null;

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

         BackDrop = SVGDocument.getElementById('BackDrop');
      }

      function Grab(evt)
      {

         var targetElement = evt.target;

         if ( BackDrop != targetElement )
         {
            //set the item moused down on as the element to be dragged
            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)
      {
         // account for zooming and panning
         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, and has been inserted as a child of the containing group.');
            }
            else
            {
               
               alert(DragTarget.id + ' has been dropped on top of ' + targetElement.id);
            }

           
            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='BackDrop' x='-10%' y='-10%' width='110%' height='110%' fill='none' pointer-events='all' />

   <circle id='BlueCircle' cx='25' cy='25' r='20' style='fill:blue; '/>
   <circle id='RedCircle' cx='125' cy='25' r='20' style='fill:red; '/>
   <circle id='OrangeCircle' cx='225' cy='25' r='20' style='fill:orange; '/>
   <text id='DraggableText' x='20' y='200' style='fill:red; font-size:18px; font-weight:bold;'>Draggable Text</text>


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

参见

svg+js+path直线的拖动与缩放

http://blog.donews.com/seven_ing/archive/2008/08/19/1336956.aspx