SVG draggable objects design

I have designed draggable component in plain javascript which can manipulate SVG Object or it's group, You can drag and drop any svg component structure by simple setting it's draggable attribute to true. My library includes my own layout algorithm, and my own pattern

see the below sample picture , svg-draggable-network-view, (please try this sample in Firefox / chrome )











This UI code and draggable component can also be used inside Acrobat PDF slide view

If you want this sample code, please send me an email to my email id subburajanm@gmail.com























I have posted the PDF object oriented javascript code snippet below for your reference. Go through it if you have a requirement to do it like this ..

%PDF-1.4
1 0 obj
<<     /Type /Catalog     /Pages 2 0 R     /Names 3 0 R  >>
endobj
2 0 obj
<< /Type /Pages    /Kids [7 0 R]    /Count 1 >>
endobj
3 0 obj
<<      /AlternatePresentations 6 0 R      /JavaScript 4 0 R >>
endobj
4 0 obj
<<      /Names [ (OnLoadJavaScript)<< /S /JavaScript /JS 5 0 R >> ]
>>
endobj
5 0 obj
<<  /Length 148 >>
stream
if (alternatePresentations['circuit-app'] != null ) {
app.fs.isFullScreen = true;
alternatePresentations['circuit-app'].start(true);
}
endstream
endobj
6 0 obj
<<      /Names [ (circuit-app)7 0 R ]  >>
endobj
7 0 obj
<<      /Type /SlideShow      /Parent 2 0 R      /MediaBox [0 0 612 792]        /Subtype /Embedded      /Resources 8 0 R      /StartResource (circuit-svg) >>
endobj
8 0 obj
<<      /Names [ (circuit-svg)9 0 R ]  >>
endobj
9 0 obj
<<      /Type /FileSpec      /F (circuit-svg)     /EF 10 0 R  >>
endobj
10 0 obj
<<    /F 11 0 R  >>
endobj
11 0 obj
<<     /Length 56687     /Type /EmbeddedFile     /Subtype /image#2Fsvg+xml >>
stream

--- svg --  xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" onload="doOnLoad(evt)">

--- style type="text/css" ---

---- style ----

----  Java script ----

var ddc;

var svgDoc;

function doOnLoad(evt) {
svgDoc = evt.target.ownerDocument;
var svgRootElem = svgDoc.documentElement;

ddc = new SVGDragAndDrop(svgDoc, svgRootElem);
ddc.init();
}

function SVGDragAndDrop(_svgDocument, _svgRootElement) {
this.svgDocument = _svgDocument;
this.svgRootElement = _svgRootElement;
this.defNS = null;
return this;
}

SVGDragAndDrop.prototype.init = function() {
this.svgRootElement.addEventListener("mousedown",
function(evt) { ddc.grap(evt); }, false);
this.svgRootElement.addEventListener("mousemove",
function(evt) { ddc.drag(evt); }, false);
this.svgRootElement.addEventListener("mouseup",
function(evt) { ddc.drop(evt); }, false);

this.grapPoint = this.svgRootElement.createSVGPoint();
this.trueCoords = this.svgRootElement.createSVGPoint();
this.dragger = new MySVGNodeDragger(this.svgDocument, this.svgRootElement);
this.maxX = 1000;
this.maxY = 500;
}


--- script ----

svg data

endstream
endobj
xref
0 11
0000000000 65535 f
0000000010 00000 n
0000000093 00000 n
0000000162 00000 n
0000000248 00000 n
0000000340 00000 n
0000000544 00000 n
0000000607 00000 n
0000000792 00000 n
0000000855 00000 n
0000000943 00000 n
0000000985 00000 n
trailer
<< /Size 12    /Root 1 0 R >>
startxref
58192
%%EOF