SVG jQuery UI Drag Example

Add a custom drag handler to jQuery UI draggable in order to drag jQuery-SVG elements around

by Emre

HTML

<script src="https://rawgit.com/kbwood/svg/master/jquery.svg.js"></script>
<link rel="stylesheet" href="https://rawgit.com//kbwood/svg/master/jquery.svg.css">
<h1>SVG jQuery UI Drag Example</h1>

<div  id="svg_canvas">
    <svg width="100%" height="100%">
        <circle id="blue" cx="0" cy="0" r="50" fill="blue" />
        <text x="0" y="10">Emre</text>
    </svg>
</div>

CSS

#svg_canvas {
    position: relative;
    height: 400px;
    width: 400px;
    background: #ffc;
}

JavaScript

function drawInto(svg) {
    svg.circle(100, 100, 50, {
        id: 'red',
        fill: 'red'
    });
}

$('#svg_canvas').svg({
    onLoad: drawInto
});