Source code for the drag and drop example

<?xml version="1.0"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink"
 width="300" height="200"
 onload="Init( evt )" >

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

var svgRoot;
var newP;
var bmousedown=0;
var myCirc;

function Init(){
   svgRoot = document.documentElement;
   newP = svgRoot.createSVGPoint();
   myCirc = document.getElementById("mycirc");
   }

function getMouse(evt){
   var position = svgRoot.createSVGPoint();
   position.x = evt.clientX;
   position.y = evt.clientY;
   return position;
   }

function onMouseDown(evt){
   bmousedown=1;
   newP=getMouse(evt);
   doUpdate();
   }

function onMouseMove(evt){
   if(bmousedown){
       newP=getMouse(evt);
       doUpdate();
       }
   }

function onMouseUp(evt){
   bmousedown=0;
   }

function doUpdate(){
   myCirc.setAttributeNS(null, "cx", newP.x );
   myCirc.setAttributeNS(null, "cy", newP.y );
   }

// ]]></script>

<rect id="background" style="fill: #ffffdd" x="0" y="0" width="300" height="200" />
<circle id="mycirc" style="stroke: #cc3333; stroke-width: 2;   fill: #bbeeff" cx="150" cy="100" r="25"/>
<rect id="canvas" x="0" y="0" width="300" height="200" opacity="0"
   pointer-events="visible"
   onmousedown="onMouseDown(evt)"
   onmousemove="onMouseMove(evt)"
   onmouseup="onMouseUp(evt)"/>

</svg>