拖放主要的要求是平移和定位。

<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd" [
  <!ATTLIST svg xmlns:xlink CDATA #FIXED "http://www.w3.org/1999/xlink">
]>

<!-- SVG - Learning By Coding - http://www.datenverdrahten.de/svglbc/ -->
<!--    Author: Dr. Thomas Meinike 07/03 - thomas@handmadecode.de     -->

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

  <title>SVG - Learning By Coding</title>
  <desc>SVG-Spezifikation in Beispielen</desc>

  <defs>

    <script type="text/javascript">
      <![CDATA[

      var obj,x,y,attr1,attr2,wert1,wert2,aktiv=false;

      function MoveObj(evt)
      {
        if(aktiv)
        {
          x=evt.clientX()
          y=evt.clientY()

          if(obj.tagName=="circle")
          {
            attr1="cx";
            attr2="cy";
            wert1=x;
            wert2=y;
          }
          else if(obj.tagName=="rect")
          {
            attr1="x";
            attr2="y";
            wert1=x-obj.getAttribute("width")/2;
            wert2=y-obj.getAttribute("height")/2;
          }

          obj.setAttribute(attr1,wert1);
          obj.setAttribute(attr2,wert2);
        }
      }
  
      function ClickObj(evt)
      {
        obj=evt.target;
        aktiv=true;
      }
 
      function OutOfObj(evt)
      {
        aktiv=false;  
      }

      ]]>
    </script>

  </defs>

  <text x="20" y="30" style="fill: #000; font-size: 24px">
    Drag and Drop simulieren</text>

  <text x="20" y="55" style="fill: #000">
    Objekte mit dem Mauszeiger erfassen und langsam bewegen ...</text>

  <circle r="20" cx="100" cy="100" style="fill: #F00"
    onmousedown="ClickObj(evt)" onclick="ClickObj(evt)" onmousemove="MoveObj(evt)"
    onmouseup="OutOfObj(evt)" onmouseout="OutOfObj(evt)">
    <set attributeName="fill" attributeType="CSS" to="#090" begin="mousedown"/>
    <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseup"/>
    <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseout"/>
  </circle>

  <rect x="150" y="85" width="50" height="30" style="fill: #00F"
    onmousedown="ClickObj(evt)" onclick="ClickObj(evt)" onmousemove="MoveObj(evt)"
    onmouseup="OutOfObj(evt)" onmouseout="OutOfObj(evt)">
    <set attributeName="fill" attributeType="CSS" to="#FF0" begin="mousedown"/>
    <set attributeName="fill" attributeType="CSS" to="#00F" begin="mouseup"/>
    <set attributeName="fill" attributeType="CSS" to="#00F" begin="mouseout"/>
  </rect>

</svg>

－－－－－－－－－－－－－－－－－－
现在我需要实现群组的拖放，希望大家帮帮忙～～～